鍍金池/ 問答/HTML/ 如何在vue中讀取本地Json文件中的圖片路徑

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

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

{

"about":[
    {"url":"require('./assets/img/about1.jpg')"},
    {"url":"../../assets/img/about2.jpg"},
    {"url":"../img/about3.jpg"}
],

}

clipboard.png

clipboard.png

在組件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;

}
}

問題是文字顯示出來了，圖片顯示不出來 ，用以上三個(gè)路徑度顯示不出來，是什么問題呢

回答
編輯回答
維她命

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 時(shí)不確定圖片地址，可以在你對(duì)應(yīng)的VUE組件中 直接 引入一張圖片測(cè)試下地址，然后再放在JSON 中。

2018年3月11日 15:51
編輯回答
安淺陌

讀不了。

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

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

2017年2月15日 17:58