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