v-bind動(dòng)態(tài)綁定src路徑不成功

問(wèn)題：在做Vue項(xiàng)目的時(shí)候，由于項(xiàng)目需求，需要?jiǎng)討B(tài)綁定img的src時(shí)，突然發(fā)現(xiàn)如果說(shuō)是直接請(qǐng)求后臺(tái)接口的圖片地址就能顯示，

但是直接動(dòng)態(tài)綁定img的src的圖片的相對(duì)路徑或者是絕對(duì)路徑的時(shí)候，圖片不能顯示。

解決方案 1

當(dāng)在給數(shù)據(jù)MyimgSrc 設(shè)置絕對(duì)路徑或者是相對(duì)路徑時(shí)應(yīng)該使用require引入才能成功

currentSrc : require("@/assets/1.png")

解決方案 2

直接導(dǎo)入

<img :src="url"/>
import url from '../../assets/logo.png'
data {
    url,
}

解決方案 3

把圖片放到static 文件夾里面 就能直接引入

總結(jié)：當(dāng)動(dòng)態(tài)綁定img的src的時(shí)候，vue數(shù)據(jù)綁定圖片的相對(duì)路徑或者是絕對(duì)路徑的時(shí)候，需要require路徑。

vue踩坑--動(dòng)態(tài)v-for圖片路徑問(wèn)題

問(wèn)題描述：想要用v-for來(lái)動(dòng)態(tài)生成圖片路徑

<div v-for="item in 40">
	<img :src="'./../../assets/img/' + item + '.jpg'" alt="">
</div>

打包后的路徑是這樣的

打包后的資源目錄是這樣的

問(wèn)題所在

上面樣寫是不行的，你會(huì)發(fā)現(xiàn)圖片在頁(yè)面中并沒(méi)有正確顯示。從上面的圖片可以看出，打包后的圖片路徑明顯不對(duì)。     

這是因?yàn)閣ebpack并沒(méi)有對(duì)我們拼接的路徑進(jìn)行解析，圖片也沒(méi)有被引用到打包后的目錄（如果有的話應(yīng)該是40張）

vue-cli文檔的HTML和靜態(tài)資源處理里是這么描述的

靜態(tài)資源可以通過(guò)兩種方式進(jìn)行處理：    

在 JavaScript 被導(dǎo)入或在 template/CSS 中通過(guò)相對(duì)路徑被引用。這類引用會(huì)被 webpack 處理。

放置在 public 目錄下或通過(guò)絕對(duì)路徑被引用。這類資源將會(huì)直接被拷貝，而不會(huì)經(jīng)過(guò) webpack 的處理。

從相對(duì)路徑導(dǎo)入    

當(dāng)你在 JavaScript、CSS 或 *.vue 文件中使用相對(duì)路徑 (必須以 . 開頭) 引用一個(gè)靜態(tài)資源時(shí)，該資源將會(huì)被包含進(jìn)入 webpack 的依賴圖中。在其編譯過(guò)程中，所有諸如 <img src="…">、background: url(…) 和 CSS @import 的資源 URL 都會(huì)被解析為一個(gè)模塊依賴。

例如，url(./image.png) 會(huì)被翻譯為 require(’./image.png’)，

而：<img src="./image.png">將會(huì)被編譯到：h(‘img’, { attrs: { src: require(’./image.png’) }})

那在上面里我們也是寫的相對(duì)路徑呀，為什么沒(méi)有被編譯呢？     

這是因?yàn)樵诰幾g時(shí)圖片的url還沒(méi)有拼接好，{{}}表達(dá)式只會(huì)在渲染到頁(yè)面上的時(shí)候執(zhí)行，所以編譯的時(shí)候src還是’./…/…/assets/img/’ + item + ‘.jpg’，這樣的話webpack不認(rèn)為這是一個(gè)模塊，所以直接不處理，圖片也就沒(méi)有被編譯。

解決辦法

把圖片作為資源引入，在圖片的url加上require，變成require(url)。

實(shí)現(xiàn)代碼

<template>
	<div v-for="item in images">
		<img :src="item" alt="">
	</div>
</template>
<script>
    export default {
        name: "",
        data: function () {
            return {
                changeDirection: true,
                images:[
					require('./../../assets/img/0.jpg'),
					......
					require('./../../assets/img/40.jpg'),
				]
            }
        }
    }
</script>

不會(huì)吧不會(huì)吧，這么多圖片不會(huì)真有人一個(gè)個(gè)寫吧？多圖片應(yīng)該這樣寫

<script>
    export default {
        name: "",
        data: function () {
            return {
                changeDirection: true,
                images:(function () {
                    // 導(dǎo)入圖片模塊
                    let fileArr = [];
                    for (let i = 0; i < 40; i++) {
                        fileArr[i] = require('./../../assets/img/' + i + '.jpg');
                    }
                    return fileArr;
                })(),
            }
        }
    }
</script>

修改后打包后的路徑

修改后打包后的資源目錄

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論