vue中的js引入图片,必须require进来
需求:如何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" 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},
# 正确✅
{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进来的更多相关文章
- vue中的js引入图片,使用require相关问题
vue中的js引入图片,必须require进来 或者引用网络地址 <template> <div class="home"> <img alt=&qu ...
- 在vue中通过js动态控制图片按比列缩放
1.html 通过外层的div来给img对应的class,隐藏的img是得到img图片请求回来时的原始尺寸.外层div是固定大小,因此,图片有两种情况去适应外部div的尺寸.一种是宽度大于高度的情况, ...
- vue中使用js动画与velocity.js
一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...
- vue中eslintrc.js配置最详细介绍
本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /* ...
- vue中创建js文件使用export抛出函数,import引入后不能绑定HTML的问题
在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...
- vue中按需引入Element-ui
安装 1.安装element-ui:npm i element-ui -S. 2.安装babel-plugin-component:npm install babel-plugin-component ...
- 关于Vue中main.js,App.vue,index.html之间关系进行总结
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...
- vue中的js动画与Velocity.js结合
vue里面除了用css写动画,还可以用js写动画,vue的transition中,定义了几个动画钩子 第一个动画钩子:@before-enter <div id='app'> <tr ...
- vue中动态加载图片路径的方法
assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.p ...
随机推荐
- MariaDB 存储过程与函数(10)
MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可MariaDB的目的是完全兼容MySQL,包括API和命令行,MySQL由于现在闭源了,而能轻松成为MySQ ...
- Django(视图 CBV、FBV)
day67 参考:http://www.cnblogs.com/liwenzhou/articles/8305104.html CBV和FBV 我们之前写过的都是基于函数的view,就叫FBV.还可以 ...
- Git - 必知必会
配置Git git config --global user.name "your_name" # 配置全局用户名 git config --global user.email & ...
- Tornado初探
Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过为了能有效 ...
- python中大于0的元素全部转化为1,小于0的元素全部转化为0的代码
[code] """ 大于0的元素全部转化为1 """ np_arr = np.array([[1 ,2, 3, 4]]) print(&q ...
- (转) CentOS7.4 + MySQL8.0 + Git + Gogs搭建
原文:https://blog.csdn.net/qq_16075483/article/details/80295793 1.装系统,这个不会的下面就不用看了2.CentOS7.X安装MySQL8. ...
- UTF-8和GBK编码的区别
UTF-8:对英文使用8位(一个字节).中文使用24位(三个字节)编码.对于英文字符比较多的网站一般用utf-8来编码以节省空间:包含全世界所有国家需要用到的字符,其编码的蚊子可以在各国各种支持utf ...
- [Java初探04]__字符串(String类)相关
前言 接下来将暂时将重心偏移向实际操作,不在将大量时间花费在详细的知识点整理上,将会简略知识总结笔记的记录,加强实际练习的时间,实例练习篇也不再同步进行,我会将部分我觉得重要的源码更新在每节知识点后面 ...
- MutationObserver DOM变化的观察
简单的给MutationObserver做个测试及总结笔记. MutationObserver,window上的一个(构造)函数,可以通过其创建的观察者(观察对象)达到观察DOM的变化的效果. 可适用 ...
- 如果非得了解下git系统... - 实践篇
git的定义是一个内容寻址文件系统.内容.寻址.文件.系统,该来的总会来的… 本文旨在通过实践来介绍.git文件夹中的目录及文件功能,属git基础知识.但在此基础上可解决各git使用过程中可能遇到的问 ...