require引入js vue_vue中的js引入图片，必须require进来

需求：如何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中的js引入图片，使用require相关问题

vue中的js引入图片,必须require进来 或者引用网络地址

在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中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

vue中动态加载图片路径的方法

assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.p ...

vue中moment&period;js的使用

一.介绍 moment.js是一款现在对时间处理的强大的函数. Moment被设计用于在浏览器和Node.js中工作. 目前ci系统使用的浏览器有:IE8.IE9在Windows 7上.Chrome在 ...

随机推荐

Windows下使用WSRM限制MongoDB内存

有个项目用到了MongoDB,我们是在WINDOWS 2008 64位环境下部署的,为啥不部署到linux下面呢,我们没那么多服务器,只能将就一下了. 大家都知道Mongodb吃内存太厉害了,如果不重 ...

Java递归列出目录下全部文件

Java递归列出目录下全部文件 /** * 列出指定目录的全部内容 * */ import java.io.*; class hello{ public static void main(String ...

&period;net&plus;easyui系列--datagrid

加载CSS

js读取cookie、设置cookie

//-----------------------------直接调用函数就可以了------------------------------ setCookie("test",& ...

C&period; New Year and Rating

C. New Year and Rating time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

the c programing language 学习过程6

payroll工资名单 hierarchy分层层次 vexing 使人烦恼的 alignment结盟 semantics 语义 aethetic审美 parameterize 参数化 1结构标记 成员 ...

Java 泛型进阶

擦除 在泛型代码内部,无法获得任何有关泛型参数类型的信息. 例子1: //这个例子表明编译过程中并没有根据参数生成新的类型 public class Main2 { public static voi ...

&period;net Core 微服务框架 surging 使用

surging 是一个分布式微服务框架,提供高性能RPC远程服务调用,采用Zookeeper.Consul作为surging服务的注册中心, 集成了哈希,随机,轮询作为负载均衡的算法,RPC集成采用的 ...

Usefull Resources

Sql Server Profiler 1. http://www.cnblogs.com/Fooo/archive/2013/02/19/2916789.html 2. http://5439255 ...

锻造完美U盘小偷：活用消息机制

锻造完美U盘小偷:活用消息机制作者:灰狐来源:灰狐's Blog 注:本文已发表在2008年第1期,转载请注明出处. 以前经常看到有人做出一些蛮有意思的小工具,其中最多的似乎就 ...