vue中img src 動(dòng)態(tài)加載本地json的圖片路徑寫法
更新時(shí)間：2019年04月25日 15:31:16 作者：遇你溫柔如初
這篇文章主要介紹了vue中的img src 動(dòng)態(tài)加載本地json的圖片路徑寫法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
目錄：
注意：本地json文件和json文件里的圖片地址都必須寫在static 靜態(tài)文件夾里；否則json文件里的url地址找不到。
major_info.json文件里的圖片路徑寫法
頁面通過v-bind的方式加載：
PS：vue中圖片src路徑賦值
vue中引入static文件夾中圖片，本以為src中直接寫入圖片所在路徑即可，結(jié)果發(fā)現(xiàn)圖片無法顯示，控制臺(tái)報(bào)404錯(cuò)誤，圖片無法找到。網(wǎng)上找到解決方案，在此mark一下，以便以后查詢。
圖片src路徑動(dòng)態(tài)賦值
<img class="thumb" width="200px" height="150px" :src="getThumb(item.type)" />
<script>
...
methods: {
getThumb(type) {
let thumb = {
WMS: require("img/world.jpg"),
WFS: require("img/wfs.jpg"),
tool: require("img/tool.jpg")
};
return thumb[type];
}
}
...
</script>
img為設(shè)置的路徑別名
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'assets': path.resolve(__dirname, '../src/assets'),
'img': resolve('static/img'),
'%': resolve('./static')
}
},
...
固定路徑
如果是固定路徑的話:
<img class="thumb" width="200px" height="150px" src="/static/img/world.jpg" />
總結(jié)
以上所述是小編給大家介紹的vue中img src 動(dòng)態(tài)加載本地json的圖片路徑寫法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧！
相關(guān)文章
這篇文章主要為大家介紹了Vue開發(fā)實(shí)例探究key的作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了vue引入高德地圖并繪制點(diǎn)線面的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-03-03
vue2和elementUI?實(shí)現(xiàn)落日余暉登錄頁和滑塊校驗(yàn)功能
這篇文章主要介紹了vue2和elementUI打造落日余暉登錄頁和滑塊校驗(yàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-06-06
vue?this.$refs.xxx獲取dom注意事項(xiàng)?v-if?v-for渲染的dom不能直接使用
這篇文章主要介紹了vue?this.$refs.xxx獲取dom注意事項(xiàng)?v-if?v-for渲染的dom不能直接使用問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue-cli 引入jQuery，Bootstrap，popper的方法
這篇文章主要介紹了vue-cli 引入jQuery，Bootstrap，popper的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
使用vue3-print-nb實(shí)現(xiàn)打印pdf分頁代碼示例
這篇文章主要介紹了使用vue3-print-nb實(shí)現(xiàn)打印pdf分頁的相關(guān)資料,這種方法不僅適用于Vue3項(xiàng)目,也可以在其他前端框架中實(shí)現(xiàn)類似的打印分頁功能,需要的朋友可以參考下2024-10-10
使用antv替代Echarts實(shí)現(xiàn)數(shù)據(jù)可視化圖表詳解
這篇文章主要為大家介紹了使用antv替代Echarts實(shí)現(xiàn)數(shù)據(jù)可視化圖表詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
本篇文章給大家分享了vue v-model動(dòng)態(tài)生成的相關(guān)知識(shí)點(diǎn)以及實(shí)例代碼，有興趣的朋友參考學(xué)習(xí)下。2018-06-06
Vue和SpringBoot之間傳遞時(shí)間的方法實(shí)現(xiàn)
本文主要介紹了Vue和SpringBoot之間傳遞時(shí)間的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
在vue3項(xiàng)目中實(shí)現(xiàn)國際化的代碼示例
國際化就是指在一個(gè)項(xiàng)目中，項(xiàng)目中的語言可以進(jìn)行切換（中英文切換），那么在實(shí)際項(xiàng)目中是如何實(shí)現(xiàn)的呢，本文就給大家詳細(xì)的介紹實(shí)現(xiàn)方法,需要的朋友可以參考下2023-07-07