鍍金池/ 問(wèn)答/HTML/ vue中引用圖片

vue中引用圖片

通過(guò)父組件向子組件傳值圖片地址，子組件顯示

clipboard.png
父組件數(shù)據(jù)是

clipboard.png

在子組件中

clipboard.png

如上圖所示，紅字1和2的方式載入圖片地址不顯示，紅字3的方式就可以顯示圖片。
求助

回答
編輯回答
氕氘氚

1和2src前面有冒號(hào)，vue會(huì)將雙引號(hào)中的內(nèi)容是作為變量解析然后賦值給src。
3中src的值就是雙引號(hào)中的字符串，vue不會(huì)處理。
所以問(wèn)題的關(guān)鍵是確保加載資源路徑正確。

clipboard.png

2018年2月25日 16:16
編輯回答
不歸路

1的方式本身就是不行的、

2的方式可以采用return require(`../assets/images/${this.chartInfo.chartImg}`)

2017年1月6日 11:39
編輯回答
殘淚

你的這個(gè)chartInfo,沒(méi)有傳進(jìn)去吧，你打印看看，我記得駝峰的寫(xiě)法
<my-chart :chart-info="item"></my-chart>
這樣props:["chartInfo"]才能接的到

2018年5月9日 16:31
編輯回答
笨笨噠

想到一種情況，一般的，資源引入后 cli 的默認(rèn)配置會(huì)給資源增加 hash 版本、并且把資源引入位置的資源路徑更新，這種傳值的方式無(wú)法更新到引入版本號(hào)，所以導(dǎo)致404（上面都是純猜的，你可以看下報(bào)錯(cuò)和 sources 情況）；

還有一種方式，你在父組件中，把圖片直接 import，然后把 imgObj 傳遞給子組件展示

2017年8月19日 18:58