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

更新時(shí)間：2022年06月05日 09:01:00 作者：zouyi_888

這篇文章主要介紹了vue實(shí)現(xiàn)在data里引入相對(duì)路徑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

問(wèn)題

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

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

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

<img :src="stepOngoing">

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

解決

發(fā)現(xiàn)只有這么寫(xiě)才行，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ò)：

剛開(kāi)始以為是路徑出問(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文件夾里，然后和正常寫(xiě)圖片路徑那樣寫(xiě)就可以了：

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

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

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

如下代碼所示：

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

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

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

您可能感興趣的文章:

相關(guān)文章

解決vue項(xiàng)目中遇到 Cannot find module ‘chalk‘ 報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目中遇到 Cannot find module ‘chalk‘ 報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue和react中關(guān)于插槽詳解
這篇文章主要介紹了vue和react中關(guān)于插槽詳解，slot插槽是Vue對(duì)組件嵌套這種擴(kuò)展機(jī)制的稱謂，在react可以也這樣稱呼，但是并不很常見(jiàn)。不過(guò)叫slot確實(shí)很形象
2022-08-08
Vue的MVVM實(shí)現(xiàn)方法
本篇文章主要主要介紹了Vue的MVVM實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
vue格式化element表格中的時(shí)間為指定格式
這篇文章主要介紹了vue中格式化element表格中的時(shí)間為指定格式,需要的朋友可以參考下
2022-05-05
關(guān)閉eslint檢查和ts檢查的簡(jiǎn)單步驟記錄
這篇文章主要給大家介紹了關(guān)于關(guān)閉eslint檢查和ts檢查的相關(guān)資料,eslint是一個(gè)JavaScript的校驗(yàn)插件,通常用來(lái)校驗(yàn)語(yǔ)法或代碼的書(shū)寫(xiě)風(fēng)格,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-02-02
VUE中v-on:click事件中獲取當(dāng)前dom元素的代碼
這篇文章主要介紹了VUE中v-on:click事件中獲取當(dāng)前dom元素的代碼，文中同時(shí)給大家提到了v-on：click獲取當(dāng)前事件對(duì)象元素的方法,需要的朋友可以參考下
2018-08-08
Vue中的Token過(guò)期驗(yàn)證與動(dòng)態(tài)路由重定向詳解
這篇文章主要為大家詳細(xì)介紹了如何在 Vue 項(xiàng)目中實(shí)現(xiàn) Token 過(guò)期驗(yàn)證,并根據(jù) Token 的有效期動(dòng)態(tài)重定向用戶到首頁(yè)或登錄頁(yè),感興趣的小伙伴可以了解下
2025-03-03
Vue 2.5 Level E 發(fā)布了：新功能特性一覽
很高興Vue 2.5 Level E 發(fā)布了。在這篇文章中，我們將重點(diǎn)介紹一些更重要的的變化：更好的 TypeScript 集成，更好的錯(cuò)誤處理，更好地支持單文件組件中的函數(shù)式組件以及與環(huán)境無(wú)關(guān)的服務(wù)端渲染
2017-10-10
在 Typescript 中使用可被復(fù)用的 Vue Mixin功能
這篇文章主要介紹了在 Typescript 中使用可被復(fù)用的 Vue Mixin功能，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-04-04
vue動(dòng)態(tài)添加路由后刷新頁(yè)面白屏問(wèn)題及解決
這篇文章主要介紹了vue動(dòng)態(tài)添加路由后刷新頁(yè)面白屏問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04