欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實現(xiàn)在data里引入相對路徑

 更新時間：2022年06月05日 09:01:00   作者：zouyi_888  
這篇文章主要介紹了vue實現(xiàn)在data里引入相對路徑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

在data里引入相對路徑

問題

在項目的HTML中引入圖片的相對路徑，這樣寫是能找到圖片顯示出來的：

<img src="../../../static/img/step-ongoing.png">

但圖片太多感覺太亂了了，想在data中通過變量統(tǒng)一管理。這時發(fā)現(xiàn)如果直接在data中這樣寫圖片是找不到的：

<img :src="stepOngoing">

data() ?{
?? ?return {
?? ??? ?stepOngoing: '../../../static/img/step-ongoing.png',
?? ?}
}

解決

發(fā)現(xiàn)只有這么寫才行，require內(nèi)部引入：

data() ?{
?? ?return {
?? ??? ?stepOnGoing: require('../../../static/img/step-ongoing.png'),
?? ?}
}

或者用import 在外部引入：

import stepOnGoing_src from '../../../static/img/step-ongoing.png'

data()  {
	return {
		stepOnGoing: stepOnGoing_src,
	}
}

如何在data中正常引入圖片路徑

在Vue項目中通過data設(shè)置圖片路徑，然后在template中引入后頁面無法顯示圖片，瀏覽器控制臺報錯：

剛開始以為是路徑出問題了，于是絕對路徑、相對路徑各種辦法試了一遍，發(fā)現(xiàn)還是報錯，后來才發(fā)現(xiàn)這是因為在Vue里動態(tài)生成的路徑無法被url-loader解析到，

此時有兩種解決方法

方法一：直接將你的圖片源文件放在項目目錄的static文件夾里，然后和正常寫圖片路徑那樣寫就可以了：

方法二：通過import的方法將圖片源路徑引入，如下圖所示：

需要注意的是：在Vue里圖片是通過v-bind綁定src屬性的，所以template模板上的img標(biāo)簽并不是src=""，而是v-bind:src=""或簡寫為:src=""，如果這里寫錯了，那無論如何都無法正常引入圖片。

方法三：采用背景圖做法，通過data將圖片源路徑引入，利用內(nèi)聯(lián)樣式。

如下代碼所示：

? ? ? ? <div :style="imgStyle"></div>
? ? ? ? data () {
? ? ? ? ? ? ?imgStyle: {
? ? ? ? ? ? ? ? ? backgroundImage：`url(${require('@/assets/images/xxx.png')})`
? ? ? ? ? ? ?}
? ? ? ? }

如此也可將圖片正常引入項目中并作為背景圖使用。

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

相關(guān)文章

最新評論