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標簽或者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-07
這篇文章主要介紹了在vue路由上添加公共的路由前綴方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue webpack開發(fā)訪問后臺接口全局配置的方法
今天小編就為大家分享一篇vue webpack開發(fā)訪問后臺接口全局配置的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue拖拽排序組件Vue-Slicksort，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)
最近使用vue+elementUI做項目,使用過程中很多地方會用到dialog這個組件,有好幾個地方用到了dialog的嵌套,下面這篇文章主要給大家介紹了關(guān)于前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細介紹了Vue3實現(xiàn)簡易音樂播放器組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
淺談vue2 單頁面如何設(shè)置網(wǎng)頁title
這篇文章主要介紹了淺談vue2 單頁面如何設(shè)置網(wǎng)頁title,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vite+vue3代碼風格校驗及格式化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue的data、computed、watch源碼淺談，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-04-04
本篇文章主要介紹了Vue2 SSR渲染根據(jù)不同頁面修改 meta，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11