vue中的js引入图片,使用require相关问题
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进来
需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...
- 在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中通过修改element-ui的类修改相关组件的样式
可以在App.vue中的style中修改element-ui的样式. 注意:一定要在属性值后面加上 !important 使自己定义的css样式处于权重最高,不加的话在本地调试的时候是没有问题的,不过 ...
- vue中的js动画与Velocity.js结合
vue里面除了用css写动画,还可以用js写动画,vue的transition中,定义了几个动画钩子 第一个动画钩子:@before-enter <div id='app'> <tr ...
随机推荐
- AJAX轮询的实时监控画面
上一篇我们通过异步刷新Ajax 技术,来实现监控页面监控位号值的刷新,采用Ajax (Asynchronous Javascript And XML)技术,是指一种创建交互式.快速动态网页应用的网页开 ...
- PHP的魔术常量(常用八大常量)
PHP的魔术常量都是由不同的扩展库定义的,只有在加载了这些扩展时才会出现,或者动态加载后 有八个魔术常量他们的值随着他们在代码中的位置改变而改变. __LINE__ 文件中的当前行号. 实列: &l ...
- 音频相关 ALSA ffmpeg ffplay 命令用法 g7xx
采样率: samples 441100 每秒 DAC/ADC 采样的频率,声卡一般还支持 48k 8k 等模式. 通道:channels 2声道 左右声道 也有单声道的声音,5.1 声道 位数: 16 ...
- django 从零开始 5 数据库模型创建
进入应用项目下的models.py文件 自带一个导入的包 from django.db import models 使用这个包创建models模型 我这是要创建一个图站 ,所以模型设置并不复杂(路径配 ...
- Js数组代替写循环的几个方法
简介 循环是个不可避免的结构,而且不好复用,同时循环还很难加入其他操作中.更麻烦的是,使用循环就意味着在每一个新的迭代中有更多变化需要响应. 上了循环的控制结构会使代码看起来变得复杂,故而这里提几个替 ...
- Redis(8)——发布/订阅与Stream
一.Redis 中的发布/订阅功能 发布/ 订阅系统 是 Web 系统中比较常用的一个功能.简单点说就是 发布者发布消息,订阅者接受消息,这有点类似于我们的报纸/ 杂志社之类的: (借用前边的一张图) ...
- 初识JVM:(二)Java的垃圾回收机制详解
声明:本文主要参考https://www.cnblogs.com/codeobj/p/12021041.html 仅供个人学习.研究之用,请勿用于商业用途,如涉及侵权,请及时反馈,立刻删除. 一.Ja ...
- MDI设置父子窗体
1.新建父窗体,设置窗体属性:IsMdicontainer设置成true; 2.拖入button控件,修改button中的text. 3.点击button控件设置代码: //1.窗体实例化 Form ...
- css中:如何让一个图片(不知道宽高,宽高可能比父元素div大),在父元素div内部水平垂直居中,并且不溢出父元素div,且图片不拉伸变形(可等比例缩小)?
欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...
- js 实现简单的导航下拉列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...