vue中怎麼引用本地靜態圖片-js教程-PHP中文網

vue中怎麼引用本地靜態圖片

php中世界最好的语言

發布： 2018-04-11 17:13:50

原創

11362 人瀏覽過

這次帶給大家vue中怎麼引用本地靜態圖片，vue中引用本地靜態圖片的注意事項有哪些，下面就是實戰案例，一起來看一下。

這裡寫圖片描述

# 需求：如何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('../assets/a1.png'),title:'你看我叼吗1',id:1},
   {url:require('../assets/a3.png'),title:'你看我叼吗2',id:2},
   {url:require('../assets/a4.png'),title:'你看我叼吗3',id:3}
   ]
  }),

登入後複製

效果如下：

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


<script>
  import footer1 from '../components/public/footer'
  export default {
  data: () => ({
   carouselData:[
   {url:require('../assets/a1.png'),title:'你看我叼吗1',id:1},
   {url:require('../assets/a3.png'),title:'你看我叼吗2',id:2},
   {url:require('../assets/a4.png'),title:'你看我叼吗3',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.js中引用圖片路徑的方式。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！