vue require 图片动态地址_Vue 之引入图片

阅读本文约需要5分钟

大家好，我是你们的导师，我每天都会在这里给大家分享一些干货内容(当然了，周末也要允许老师休息一下哈)。上次老师跟大家分享了Vue 之is的作用和用法的知识，今天跟大家分享下Vue 之引入图片的知识。

1 Vue 之引入图片

参考文献：http://www.fly63.com/article/detial/1797?type=3

‍

需求：如何components里面的index. vue 怎样能把assets里面的图片拿出来。  1、在img标签里面直接写上路径：

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

                {{ item.title }}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进来 或者引用网络地址

// @ 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"}, ] } }, } 今天就分享这么多，关 于Vue 之引入图片的 知 识点 ，你学会了多少？ 欢迎在留言区评论，对于有价值的留言，我们都会一一回复的。如果觉得文章对你有一丢丢帮助，请点右下角【 在看 】，让更多人看到该文章。