vue中的JS引入图片,必须require进来_数组


需求:如何components里面的index.vue怎样能把assets里面的图片拿出来。 

1、在img标签里面直接写上路径:

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

2、利用数组保存再循环输出:

<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>

本文完~

vue中的JS引入图片,必须require进来_网络地址_02

vue中的JS引入图片,必须require进来_数组_03