vue如何在data中引入圖片的正確路徑
更新時間：2022年06月05日 11:10:10 作者：ungame
這篇文章主要介紹了vue如何在data中引入圖片的正確路徑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
在data中引入圖片正確路徑
今天踩的坑給分享出來。
本來想要在橫版遍歷圖片出來在vue中自己做輪播，結(jié)果發(fā)現(xiàn)在data中直接引入路徑是渲染不出來的。
原因是webpack打包無法解析
1.通過import引入路徑才行
如果直接在模板上通過src="../../assets/images/top5.png"是沒有問題的
想通過data里的引入路徑 ，再：src綁定就不能直接把"../../assets/images/top5.png"放到data中，否則webpack打包無法解析
需要通過import引入再放到data中
如下才能渲染出來
<template> ?<div class="big-top" ?> ? ? ? ? ? ? <img alt="" v-for="(item,index) in gotop" :key="index" :src="item" > ?</div> <//template>
<script>
import top5 from "../../assets/images/top5.png"
import top4 from "../../assets/images/top4.png"
import top3 from "../../assets/images/top3.png"
import top2 from "../../assets/images/top2.png"
import top1 from "../../assets/images/top1.png"
export default {
? name: 'Animations',
? data() {
? ? return {
? ? ? gotop:[
? ? ? ? top5 ,
? ? ? ? top4 ,
? ? ? ? top3 ,
? ? ? ? top2 ,
? ? ? ? top1 ,
?
? ? ? ]
? ? }
</scriopt>2.通過require更方便
在data中定義a的值為1就可以動態(tài)改變要切換的圖片
require(`../works/assets/${this.a}.png`);3.在ui上直接動態(tài)也要通過require
<li v-for="(i,a) in imgs" :key="a"> <a><img :src="require('../../assets/'+i+'.png')" alt=""></a></li>vue引入圖片路徑問題
方法一
直接將你的圖片源文件放在項目目錄的static或public文件夾里，然后和正常寫圖片路徑那樣寫就可以了
方法二
文件放在asset中，需要將路徑轉(zhuǎn)換為編譯打包后的路徑。
如果是直接在img標(biāo)簽或者css中使用，可以直接引入路徑，打包會處理
但是如果是作為字符串的形式使用，需要使用request 或import的方式來引入，加入打包行列
imageUrl: require('../../assets/logo.png')
import img from "../../assets/logo.png";以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了一份超級詳細(xì)的Vue-cli3.0使用教程，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
路由攔截是一種在用戶訪問特定頁面之前對其進行攔截和處理的機制,下面這篇文章主要給大家介紹了關(guān)于vue前端img訪問鑒權(quán)后端進行攔截的相關(guān)資料,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue 項目 iOS WKWebView 加載問題，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要為大家介紹了圖解Vue的響應(yīng)式原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vue報錯"Failed?to?resolve?loader:less-loader"的解決方
這篇文章主要給大家介紹了關(guān)于Vue報錯"Failed?to?resolve?loader:less-loader"的解決方法,文中通過圖文介紹的非常詳細(xì),對同樣遇到這樣問題的朋友具有一定的需要的朋友可以參考下2023-02-02
Vue中常用的rules校驗規(guī)則的實現(xiàn)
在vue開發(fā)中,難免遇到各種表單校驗,本文主要介紹了Vue中常用的rules校驗規(guī)則的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了Vue如何動態(tài)加載本地圖片的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了vue實現(xiàn)一個簡單的吸頂、錨點和滾動高亮按鈕效果,需要的朋友可以參考下2019-10-10
在Vue中實現(xiàn)Excel導(dǎo)出功能(數(shù)據(jù)導(dǎo)出)
本文分享了如何在前端導(dǎo)出Excel文件,強調(diào)了前端導(dǎo)出的即時性、便捷性、靈活性和定制化優(yōu)勢,以及減輕后端服務(wù)器負(fù)擔(dān)的特點,詳細(xì)介紹了ExcelJS和FileSaver.js兩個工具庫的使用方法和主要功能,最后通過Vue實現(xiàn)了Excel的導(dǎo)出功能2024-10-10
Vue條件循環(huán)判斷+計算屬性+綁定樣式v-bind的實例
今天小編就為大家分享一篇Vue條件循環(huán)判斷+計算屬性+綁定樣式v-bind的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09