VUE这样绑定图片地址失败

Question

从JSON中获取一个地址，地址指向本地src/assets目录下的图片，将获取的地址对象放入<img src="">中时无法显示。vue中该组件部分：<div class='contactcells'>            <div class='contactcell' v-for='contactinfo in contacts'>        <router-link :to="{path:'/details',query:{contactid:contactinfo}}">                <div id="contactunit">                <!-- 这里放置通讯录头像 -->                <!-- json数据在static/data.json中 -->                <div class='contactcellimg'>                     <img :src="contactinfo.headerimg">                </div>                <div class='contactcellname'>                    {{contactinfo.name}}                </div>            </div>        </router-link>    </div>        </div>但是在显示时无法正确显示图片，浏览器中的html代码：<img src="../assets/image/zxl.jpg">我是不是缺少了哪个步骤？

Answer 1

别把数据(图片)放在assets文件下 这是webpack配置问题

你的数据没问题,它渲染的时候发成了改变
你可以放在static文件下面

Answer 2

简单点的方法单独在js中处理下该字段contactinfo.headerimg = require(contactinfo.headerimg)

Answer 3

试试require("../assets/image/zxl.jpg")

Answer 4

但凡是js里在浏览器端才能决定路径的代码，其中的路径地址都该是绝对路径引用static，或使用require提前导入对应资源。