在使用vue中實現本地靜態圖片路徑（詳細教學）

這篇文章為大家介紹了vue中本地靜態圖片路徑寫法及Vue.js中引用圖片路徑的方式，需要的朋友參考下吧

這裡寫圖片描述

需求：如何components裡面的index.vue怎麼能把assets裡面的圖片拿出來。

1.在img標籤裡面直接寫上路徑：

<img src="../assets/a1.png" class="" width="100%"/>

2.利用陣列保存再循環輸出：

<el-carousel-item v-for="item in carouselData" :key="item.id">
    <img :src="item.url" class="carouselImg"/>
    <span class="carouselSpan">{{ item.title }}</span>
</el-carousel-item>
data: () => ({
   carouselData:[
   {url:require(&#39;../assets/a1.png&#39;),title:&#39;你看我叼吗1&#39;,id:1},
   {url:require(&#39;../assets/a3.png&#39;),title:&#39;你看我叼吗2&#39;,id:2},
   {url:require(&#39;../assets/a4.png&#39;),title:&#39;你看我叼吗3&#39;,id:3}
   ]
  }),

效果如下：

index .vue裡面的完整程式碼是這個：

<script>
  import footer1 from &#39;../components/public/footer&#39;
  export default {
  data: () => ({
   carouselData:[
   {url:require(&#39;../assets/a1.png&#39;),title:&#39;你看我叼吗1&#39;,id:1},
   {url:require(&#39;../assets/a3.png&#39;),title:&#39;你看我叼吗2&#39;,id:2},
   {url:require(&#39;../assets/a4.png&#39;),title:&#39;你看我叼吗3&#39;,id:3}
   ]
  }),
  components:{
      footer1
    },
 }
</script>

PS：下面看下Vue.js中的圖片引用路徑

##當我們在Vue.js專案中引用圖片時，關於圖片路徑有以下幾種情形：

使用一

我們在data裡面定義好圖片路徑

imgUrl:'../assets/logo.png'

然後，在template模板裡面

<<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img src="
{{imgUrl}}">

這樣是錯誤的寫法，我們應該用v- bind綁定圖片的srcs屬性

:src="imgUrl">

或

<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img src="../assets/logo.png">

這種方式是依照正常HTML語法引用路徑，放在模板裡可以被webpack打包出來。

使用二

當我們需要在js程式碼裡面寫圖片路徑的時候，如果我們在data裡面寫

imgUrl: '../assets/logo.png'

此時webpack只會把它當作字串處理從而找不到圖片位址，此時我們可以使用import引入圖片路徑：

:src="avatar" />
import avatar from '@/assets/logo.png'

在data裡面定義

avatar: avatar

情形三

我們也可以把圖片放在外層的static資料夾裡面，然後在data裡面定義：

imgUrl ： '../../static/logo.png'
:src="imgUrl" />

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

改變vue請求過來的資料中的某一項值的方法

詳解使用vue-cli腳手架初始化Vue專案下的專案結構

vue與vue-i18n結合實作後台資料的多語言切換方法

以上是在使用vue中實現本地靜態圖片路徑（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！