vue如何實現在data里引入相對路徑

這篇文章主要介紹“vue如何實現在data里引入相對路徑”，在日常操作中，相信很多人在vue如何實現在data里引入相對路徑問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue如何實現在data里引入相對路徑”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

在data里引入相對路徑

問題

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

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

但圖片太多感覺太亂了了，想在data中通過變量統一管理。這時發現如果直接在data中這樣寫圖片是找不到的：

<img :src="stepOngoing">

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

解決

發現只有這么寫才行，require內部引入：

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設置圖片路徑，然后在template中引入后頁面無法顯示圖片，瀏覽器控制臺報錯：

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

此時有兩種解決方法

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

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

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

方法三：采用背景圖做法，通過data將圖片源路徑引入，利用內聯樣式。

如下代碼所示：

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

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

到此，關于“vue如何實現在data里引入相對路徑”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！