相信很多小伙伴都遇到過圖片路徑問題魁亦，一種是樣式中的背景圖，一種是img標(biāo)簽柿汛。
動(dòng)態(tài)切換img的src時(shí)陪毡，圖片路徑失敗绪杏，主要是因?yàn)関ue沒有把我們寫的路徑字符串當(dāng)做路徑處理油吭，而是純字符串處理了击蹲。
如下3種寫法，1是正常的靜態(tài)路徑婉宰；2是常出錯(cuò)的動(dòng)態(tài)路徑寫法歌豺；3是正確動(dòng)態(tài)路徑寫法。
<template>
<div class="container">
<img src="@/assets/logo.png" />
<img :src="pic" />
<img :src="pic1" />
</div>
</template>
<script>
import pic1 from '@/assets/logo.png'
export default {
name: 'test',
data() {
return {
pic: '@/assets/logo.png',
pic1: pic1,
}
},
methods: {},
}
</script>
查看3中寫法在瀏覽器中的渲染結(jié)果心包，如下圖
由此可見类咧，第2種動(dòng)態(tài)路徑，沒有按路徑解析蟹腾，直接做字符串渲染了痕惋。
使用import導(dǎo)入的圖片會(huì)按照路徑解析出正確路徑，當(dāng)然有同學(xué)使用require引入圖片的方式娃殖，也是可以的值戳。
