鍍金池/ 問答/HTML/ VUE這樣綁定圖片地址失敗

VUE這樣綁定圖片地址失敗

從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數(shù)據(jù)在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">

我是不是缺少了哪個步驟?

回答
編輯回答
只愛你

但凡是js里在瀏覽器端才能決定路徑的代碼,其中的路徑地址都該是絕對路徑引用static,或使用require提前導入對應(yīng)資源。

2018年2月11日 23:05
編輯回答
檸檬藍

別把數(shù)據(jù)(圖片)放在assets文件下 這是webpack配置問題

你的數(shù)據(jù)沒問題,它渲染的時候發(fā)成了改變
你可以放在static文件下面

2017年3月1日 15:46
編輯回答
祉小皓

簡單點的方法單獨在js中處理下該字段contactinfo.headerimg = require(contactinfo.headerimg)

2018年8月19日 12:11
編輯回答
不討喜

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

2018年6月20日 01:02
編輯回答
憶往昔

遇到這樣的問題,首先你排查network 是否加載圖片?!締栴}排查】
使用絕對路徑代替相對路徑【解決問題的辦法】

2018年4月17日 18:16