【Vue】vue中img的src屬性繫結問題
阿新 • • 發佈:2019-02-02
問題:img的src屬性填寫的圖片地址,可以正常渲染,但是一旦利用繫結:src
屬性的時候,圖片就載入失敗了
需求:滑鼠移入切換圖片
上一位前端小哥哥,沒做這個互動,我接手後加上去,很簡答的互動,我替換圖片的時候準備三元判斷,src需要屬性繫結,於是發現同樣的地址,我放上去圖片就是載入不出來,圖片載入不出來,那肯定是地址問題了(插一句:上一位大佬檔案結構可能不規範),一般都是static存放靜態檔案,但是他自己建立了一個stalic(哭笑.gif)
上程式碼:
<img src="../../../src/stalic/font/arrow0-0.png" alt=""> //上一位的
<img :src="Bol == 1 ? imgUrl : imgUrl2" alt=""> //我的 data裡面是: imgUrl: '../../../src/stalic/font/arrow0.png', imgUrl2: '../../../src/stalic/font/arrow0-0.png'
但是瀏覽器並沒有渲染出來我的圖片,而他的圖片可以正常渲染,同樣的路徑,為什麼我的不顯示? 而且瀏覽器還沒有報錯。
原因:這裡使用的是本地路徑,想起來static靜態資料夾,於是我將圖片放入到static資料夾中
再次修改路徑:
imgUrl: ./stalic/arrow0.png,
imgUrl2: ./stalic/arrow0-0.png
或者,Common寫法
imgUrl: require('../../../src/stalic/font/arrow0.png'),
imgUrl2: require('../../../src/stalic/font/arrow0-0.png')
圖片總算是出來了, 然後總結幾個可以解決本地圖片路徑顯示不出來的問題:
1.把圖片放在src同級的static資料夾下。
2.把圖片放在cdn上,把網路地址存在imgUrl裡,然後直接<img :src="imgUrl">去展示。
3.圖片放在assets資料夾,然後在data裡面require進圖片
data() {
imgUrl:require('./assets/logo.png')
}
然後放入<img :src="imgUrl">展示即可。