vue中的JS引入圖片，必須require進來

來源 | http://www.fly63.com/article/detial/1797?type=3

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

一、在img標籤裏面直接寫上路徑：

   
     
   
   
    
    
             
    
    

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

二、利用數組保存再循環輸出：

   
     
   
   
    
    
             
    
    

    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
   
     
   
   
    
    
             
    
    
<el-carousel-item v-for="item in carouselData" :key="item.id"> <img :src="item.url"/> <span>{{ 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} ] }),

vue中的js引入圖片，必須require進來 或者引用網絡地址

   
     
   
   
    
    
             
    
    

    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
    
      
    
    
     
     
              
     
   
     
   
   
    
    
             
    
    
<template> <div> <img alt="vue logo" src="../assets/logo.png"> <!--<HelloWorld msg="Welcome to Your vue.js App"/>-->

 <template> <el-carousel :interval="4000" type="card" height="200px"> <el-carousel-item v-for="item in imgList" :key="item.id"> <img :src="item.imgSrc" > <!--<img :src="defimg" >-->
 </el-carousel-item> </el-carousel> </template>
 </div></template>
<script> // @ is an alias to /src // import HelloWorld from ‘@/components/HelloWorld.vue‘
 export default { name: ‘home‘, // components: { // HelloWorld // }, data() { return {
 imgList: [　　　　　　　　　　　　# 錯誤? // {id: 1, imgSrc: jpg1}, // {id: 2, imgSrc: jpg1}, // {id: 3, imgSrc: jpg1}, # 正確? {id: 1, imgSrc: require("../assets/1.jpg")}, {id: 2, imgSrc: require("../assets/2.jpg")}, {id: 3, imgSrc: require("../assets/3.jpg")}, # 正確? // {id: 1,imgSrc:"https://hcdn1.luffycity.com/static/frontend/index/banner1(4)_1539945492.0492468.png"}, // {id: 2,imgSrc:"https://hcdn1.luffycity.com/static/frontend/index/騎士(1)_1539945488.713867.png"}, // {id: 3,imgSrc:"https://hcdn1.luffycity.com/static/frontend/index/banner11_1538122470.2779157.png"}, ] } }, }</script>

本文完~

本文分享自微信公衆號 - web前端開發（web_qdkf）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。