Vue中給圖片賦值時,可以使用v-bind指令將圖片的src屬性綁定到一個變量或表達(dá)式上,當(dāng)變量或表達(dá)式的值改變時,圖片也會相應(yīng)地改變。
示例代碼如下:
<template> <div> <img v-bind:src="imgSrc"> </div> </template> <script> export default { data() { return { imgSrc: 'https://picsum.photos/200' } }, methods: { changeImgSrc() { this.imgSrc = 'https://picsum.photos/300' } } } </script>
在上面的示例代碼中,img標(biāo)簽的src屬性被綁定到了data屬性中的imgSrc變量,初始值為'https://picsum.photos/200'。當(dāng)imgSrc變量的值改變時,圖片的src屬性也會相應(yīng)地改變,從而實現(xiàn)了圖片的動態(tài)賦值。
在Vue中,也可以使用v-bind簡寫語法(:)來簡化代碼,例如:
<img :src="imgSrc">
同時,如果圖片的路徑是相對于項目的根目錄的,可以使用require()函數(shù)來給圖片賦值,示例代碼如下:
<img :src="require('@/assets/images/logo.png')">
上述代碼中,@表示項目的src目錄,assets/images/logo.png是相對于src目錄的路徑。使用require()函數(shù)可以將圖片打包到webpack中,從而實現(xiàn)項目的優(yōu)化。