vue實現在data裡引入相對路徑

Posted on by

在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 :style="imgStyle"></div>
        data () {
             imgStyle: {
                  backgroundImage：`url(${require('@/assets/images/xxx.png')})`
             }
        }

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

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。 

推薦閱讀：