vue怎么在data中引入圖片的正確路徑

這篇“vue怎么在data中引入圖片的正確路徑”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“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";

以上就是關于“vue怎么在data中引入圖片的正確路徑”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。