需求：如何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} ?????] ???}),vue中的js引入图片，必须require进来 或者引用网络地址
<template> ???<div class="home"> ???????<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>vue中的js引入图片，必须require进来
原文地址：https://www.cnblogs.com/niuli1987/p/10235831.html