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提前导入对应资源。

Answer 5

遇到这样的问题，首先你排查network 是否加载图片。【问题排查】
使用绝对路径代替相对路径【解决问题的办法】