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

问题描述

问 题

<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目录下面

解决方案

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

这篇关于vue.js - vue中怎么读取json数据中的图片地址，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！