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)文章
vue實現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例
這篇文章主要介紹了vue實現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue webpack開發(fā)訪問后臺接口全局配置的方法
今天小編就為大家分享一篇vue webpack開發(fā)訪問后臺接口全局配置的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)
最近使用vue+elementUI做項目,使用過程中很多地方會用到dialog這個組件,有好幾個地方用到了dialog的嵌套,下面這篇文章主要給大家介紹了關(guān)于前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2024-01-01淺談vue2 單頁面如何設(shè)置網(wǎng)頁title
這篇文章主要介紹了淺談vue2 單頁面如何設(shè)置網(wǎng)頁title,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11