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)文章
如何使用VuePress搭建一個(gè)類型element ui文檔
這篇文章主要介紹了如何使用VuePress搭建一個(gè)類型element ui文檔，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了vue背景圖片路徑問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
最近寫vue的一個(gè)練手項(xiàng)目需要在里面實(shí)現(xiàn)一個(gè)輪播圖,想到去用第三方插件,百度了一輪,發(fā)現(xiàn)大部分都是swiper這個(gè)插件,這篇文章主要給大家介紹了關(guān)于vue2使用swiper4踩坑的相關(guān)資料,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了解決elementui表格操作列自適應(yīng)列寬，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要給大家介紹了關(guān)于vuex的數(shù)據(jù)渲染與修改的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要給大家介紹了關(guān)于vue中銷毀定時(shí)器的幾種解決方案,銷毀定時(shí)器的操作一般是在beforeDestroy鉤子中進(jìn)行，根據(jù)定時(shí)器的數(shù)量不同可以有多種解決方法,需要的朋友可以參考下2023-08-08
這篇文章介紹了Vue項(xiàng)目中使用Bootstrap的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了Vue中的slot使用插槽分發(fā)內(nèi)容的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
vue使用天地圖、openlayers實(shí)現(xiàn)多個(gè)底圖疊加顯示效果
這篇文章主要介紹了vue使用天地圖、openlayers實(shí)現(xiàn)多個(gè)底圖疊加顯示,根據(jù)返回的經(jīng)緯度列表通過天地圖、openlayers實(shí)現(xiàn)底圖添加，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-04-04
這篇文章主要介紹了使用Vue.js 和Chart.js制作絢麗多彩的圖表，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06