如何在vue中读取本地Json文件中的图片路径

Question

如何在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;

}
}

问题是文字显示出来了，图片显示不出来 ，用以上三个路径度显示不出来，是什么问题呢

Answer 1

读不了。

你的json里存的是开发时的 assets地址，而你的逻辑渲染图片路径的部分属于运行在浏览器端的业务代码，这时assets对你的业务代码来说不存在，这算两套环境的代码。

你可以使用 import 的方式将图片引入，再存在about对象中（是对象不是json文件），或者放入 static，使用绝对路径。

Answer 2

vue-cli 目录中，只有static 目录放置的静态文件可以被外部访问。如果想在JSON（static/mock/index.json） 中引入图片地址，必须把图片放在static 目录下。然后JSON 中的图片地址，是你的vue 组件引入图片的地址。我是在src/component/home/home.vue中引入 static/img/1.jpg 图片，图片地址为："../../../static/img/1.jpg"。 在JSON 中的地址也要这样写。如果配置JSON 时不确定图片地址，可以在你对应的VUE组件中 直接 引入一张图片测试下地址，然后再放在JSON 中。

Answer 3

解决了吗 大佬们