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 ...
随机推荐
- 编码的来源于格式简介ANSI、GBK、GB2312、UTF-8、GB18030和 UNICODE
编码一直是让新手头疼的问题,特别是 GBK.GB2312.UTF-8 这三个比较常见的网页编码的区别,更是让许多新手晕头转向,怎么解释也解释不清楚.但是编码又是那么重要,特别在网页这一块.如果你打出来 ...
- linux使用php动态安装模块mysqli.so(ext/mysqlnd/mysqlnd.h: 没有那个文件或目录)
由于我先安装的php,再安装的mysql! 正常过程: 1.安装mysql 2.安装php configure时带–with-mysql参数 现在我不想重装,因此使用phpize动态安装mysqli, ...
- 深入理解 vertical-align 属性
语法 用来指定行内元素或表格元素的垂直对齐方式 相对父元素的值 baseline 使元素的基线与父元素的基线对齐.HTML规范没有详细说明部分可替换元素的基线,如textarea,这意味着这些元素使用 ...
- 吃透这份pdf,面试阿里、腾讯、百度等一线大厂,顺利拿下心仪offer!
前言 最近一位年前裸辞的朋友来找我诉苦,说因为疫情原因现在都在家吃老本.本想着年后就来找工作的,但是现在这个情况也不好找,而且很多公司也随着这次疫情面临着资金紧缺导致裁员严重的甚至倒闭,导致很多人失业 ...
- Object.keys()方法
一.定义和用法 返回对象的可枚举属性和方法的名称.二.参数 obj:要返回器枚举自身属性的对象.三.返回值 返回一个所有元素为字符串的数组,其元素来自于从给定的obj里可直接枚举的属性.这些属性的顺序 ...
- python从数据库取数据后写入excel 使用pandas.ExcelWriter设置单元格格式
用python从数据库中取到数据后,写入excel中做成自动报表,ExcelWrite默认的格式一般来说都比较丑,但workbook提供可以设置自定义格式,简单记录个demo,供初次使用者参考. 一. ...
- 简说Python之flask-SQLAlchmey的web应用
目录 原生语句操作MySQL数据库 1.安装MySQL 2.MySQL设置用户和权限 3.用PyMySQL操纵MySQL数据库 4. CRUD增,删,改,查 使用SQLAlchemy 1.安装SQLA ...
- mysql schema设计中应避免的陷阱
谨记红字: 1. 表中谨防太多列: MySQL 的存储引擎API 工作时需要在服务器层和存储引擎层之间通过行缓冲格式拷贝数据,然后在服务器层将缓冲内容解码成各个列.从行缓冲中将编码过的列转换成行数据结 ...
- javaScript 基础知识汇总 (十四)
1.回调 什么是回调? 个人理解,让函数有序的执行. 示例: function loadScript(src,callback){ let script = document.createElemen ...
- php 调用curl_init失败
当你在开发微信公众号,微信小程序的时候,往往会遇到困难 进入服务器,输入 tail -f /var/log/apache2/error.log 看看apache2的日志 就因为php 的curl扩展没 ...