vue如何在data中引入圖片的正確路徑
在data中引入圖片正確路徑
今天踩的坑給分享出來。
本來想要在橫版遍歷圖片出來在vue中自己做輪播，結果發現在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就可以動態改變要切換的圖片
require(`../works/assets/${this.a}.png`);
3.在ui上直接動態也要通過require
<li v-for="(i,a) in imgs" :key="a"> <a><img :src="require('../../assets/'+i+'.png')" alt=""></a></li>
vue引入圖片路徑問題
方法一
直接將你的圖片源文件放在項目目錄的static或public文件夾裡，然後和正常寫圖片路徑那樣寫就可以瞭
方法二
文件放在asset中，需要將路徑轉換為編譯打包後的路徑。
如果是直接在img標簽或者css中使用，可以直接引入路徑，打包會處理
但是如果是作為字符串的形式使用，需要使用request 或import的方式來引入，加入打包行列
imageUrl: require('../../assets/logo.png')
import img from "../../assets/logo.png";
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。