vue中引入图片
vue中引入图片
方式一
直接在img标签里面直接写上路径
<img src="../assets/a1.png" class="" width="100%"/>
方式二
使用require或者引用网络地址
<img :src="imgList.imgSrc" >
<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" alt="">--> </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}, # 错误❌ 该写法,会导致动态解析绑定的地址就是 ../../images/1.png,服务启动会导致该资源找不到,
# 和方式一最大的区别,方式一打包自动转换地址,该方式则不会,图片地址就是../../images/1.png // {id: 1, imgSrc: "../../images/1.jpg"}, // {id: 2, imgSrc: "../../images/2.jpg"}, // {id: 3, imgSrc: "../../images/3.jpg"},
//正确动态绑定图片地址的操作 # 正确✅ {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>