vue如何實(shí)現(xiàn)在data里引入相對(duì)路徑

這篇文章主要介紹“vue如何實(shí)現(xiàn)在data里引入相對(duì)路徑”，在日常操作中，相信很多人在vue如何實(shí)現(xiàn)在data里引入相對(duì)路徑問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue如何實(shí)現(xiàn)在data里引入相對(duì)路徑”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

在data里引入相對(duì)路徑

問(wèn)題

在項(xiàng)目的HTML中引入圖片的相對(duì)路徑，這樣寫是能找到圖片顯示出來(lái)的：

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

但圖片太多感覺太亂了了，想在data中通過(guò)變量統(tǒng)一管理。這時(shí)發(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項(xiàng)目中通過(guò)data設(shè)置圖片路徑，然后在template中引入后頁(yè)面無(wú)法顯示圖片，瀏覽器控制臺(tái)報(bào)錯(cuò)：

剛開始以為是路徑出問(wèn)題了，于是絕對(duì)路徑、相對(duì)路徑各種辦法試了一遍，發(fā)現(xiàn)還是報(bào)錯(cuò)，后來(lái)才發(fā)現(xiàn)這是因?yàn)樵赩ue里動(dòng)態(tài)生成的路徑無(wú)法被url-loader解析到，

此時(shí)有兩種解決方法

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

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

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

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

如下代碼所示：

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

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

到此，關(guān)于“vue如何實(shí)現(xiàn)在data里引入相對(duì)路徑”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！