首頁猿問如何在vue中讀取本地Json文件...

如何在vue中讀取本地Json文件中的圖片路徑

JavaScript

皈依舞 2019-03-23 09:15:51

如何在vue中讀取本地Json文件中的圖片路徑{"about":[ {"url":"require('./assets/img/about1.jpg')"}, {"url":"../../assets/img/about2.jpg"}, {"url":"../img/about3.jpg"}],}在組件Addressz中引用的<el-col :xs="24" :sm="8" :lg="8" :xl="8" class="mt10 mtbox" v-for="ab in about" :key="ab.url"> <div class="max-box"> <div class="tc"><img :src="ab.url"></div> <p>{{ab.p1}}</p> <p>{{ab.p2}}</p> </div></el-col>import data from '../assets/json/data.json'export default {name: 'Address',data(){return{ about:[]}},mounted(){this.about = data.about;}}問題是文字顯示出來了，圖片顯示不出來，用以上三個路徑度顯示不出來，是什么問題呢

查看完整描述

3 回答

絕地?zé)o雙

TA貢獻(xiàn)1946條經(jīng)驗獲得超4個贊

讀不了。

你的json里存的是開發(fā)時的 assets地址，而你的邏輯渲染圖片路徑的部分屬于運行在瀏覽器端的業(yè)務(wù)代碼，這時assets對你的業(yè)務(wù)代碼來說不存在，這算兩套環(huán)境的代碼。

你可以使用 import 的方式將圖片引入，再存在about對象中（是對象不是json文件），或者放入 static，使用絕對路徑。

1 反對回復(fù) 2019-04-02

慕妹3146593

TA貢獻(xiàn)1820條經(jīng)驗獲得超9個贊

vue-cli 目錄中，只有static 目錄放置的靜態(tài)文件可以被外部訪問。如果想在JSON（static/mock/index.json）中引入圖片地址，必須把圖片放在static 目錄下。然后JSON 中的圖片地址，是你的vue 組件引入圖片的地址。我是在src/component/home/home.vue中引入 static/img/1.jpg 圖片，圖片地址為："../../../static/img/1.jpg"。在JSON 中的地址也要這樣寫。如果配置JSON 時不確定圖片地址，可以在你對應(yīng)的VUE組件中直接引入一張圖片測試下地址，然后再放在JSON 中。

反對回復(fù) 2019-04-02