vue中怎么读取json数据中的图片地址，

Question

<template>
<div id="app">

<div v-for="item in response">
  <img :src="item.src" >
</div>

</div>
</template>

<script>

export default {
name: 'app',
data:function(){

return{
    response:[
    {name:'张三',src:'./assets/logo.png'},
    {name:'李四',src:'./assets/logo.png'},
    {name:'王五',src:'./assets/logo.png'},
    ]
}

}
}
</script>
<style>

app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}

</style>
其中所有的图片都放在了src里面的assets目录下面

Answer 1

放在模版里是会被 webpack 打包出来，在 js 里写图片路径 webpack 不会处理
你可以把图片放在最外层的 static 文件夹，或者使用 import require 引入：
import logo from './assets/logo.png'

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

{name:'张三',src:require('./assets/logo.png')}
昨天才遇到的问题,就是这样解决的