如何在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里存的是开发时的&nbsp;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 中。