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