vue.js - vue中怎么读取json数据中的图片地址,
本文介绍了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屋!
查看全文