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