需求:如何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进来的更多相关文章

  1. vue中的js引入图片,使用require相关问题

    vue中的js引入图片,必须require进来 或者引用网络地址 <template> <div class="home"> <img alt=&qu ...

  2. 在vue中通过js动态控制图片按比列缩放

    1.html 通过外层的div来给img对应的class,隐藏的img是得到img图片请求回来时的原始尺寸.外层div是固定大小,因此,图片有两种情况去适应外部div的尺寸.一种是宽度大于高度的情况, ...

  3. vue中使用js动画与velocity.js

    一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...

  4. vue中eslintrc.js配置最详细介绍

    本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /* ...

  5. vue中创建js文件使用export抛出函数,import引入后不能绑定HTML的问题

    在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...

  6. vue中按需引入Element-ui

    安装 1.安装element-ui:npm i element-ui -S. 2.安装babel-plugin-component:npm install babel-plugin-component ...

  7. 关于Vue中main.js,App.vue,index.html之间关系进行总结

    在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...

  8. vue中的js动画与Velocity.js结合

    vue里面除了用css写动画,还可以用js写动画,vue的transition中,定义了几个动画钩子 第一个动画钩子:@before-enter <div id='app'> <tr ...

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

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

随机推荐

  1. underscore.js源码研究(1)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

  2. Shell - 简明Shell入门13 - 用户输入(UserInput)

    示例脚本及注释 1 - arguments #!/bin/bash if [ -n "$1" ];then # 验证参数是否传入 echo "The first para ...

  3. 一次Java解析数独的经历

    1. 背景 中午下楼去吃饭,电梯里看到有人在玩数独,之前也玩过,不过没有用程序去解过,萌生了一个想法,这两天就一直想怎么用程序去解一个数独.要去解开一个数独,首先要先了解数独的游戏规则,这样才能找到对 ...

  4. mvn cli 搭建项目架构

    创建如图所示目录结构 在system-parent创建如下目录 ├─system-dao ├─system-domain ├─system-service └─system-web 创建system- ...

  5. 六、CLR下的托管代码应用程序与非托管代码程序之间的性能对比

    1.托管程序二次编译的问题,以及微软做的优化 五.CLR加载程序集代码时,JIT编译器对性能的产生的影响中介绍了CLR下托管应用程序的二次编译对性能产生的影响.事实上,在IL编译成本机代码的时候的时候 ...

  6. 一道JS面试题引发的血案

    刚入职新公司,属于公司萌新一枚,一天下午对着屏幕看代码架构时. BI项目组长给我看了一道面试别人的JS面试题. 虽然答对了,但把理由说错了,照样不及格. 话不多说,直接上题: var a = 1; s ...

  7. JavaScript -- Enumerator

    -----022-Enumerator.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&q ...

  8. logstash-3-输出到es中

    之前测试 filebeat和logstash的时候, 使用的是stdout标准输出, 现在我们想把数据输出到es中去, 1, 首先需要一个es: 修改配置文件 后台启动 ./bin/elasticse ...

  9. java开发细节问题,spring的单例模式,多线程同步问题

    1.对象的赋值,new一个对象,然后在传递给函数赋值,往往这对对象赋值就可以使用了 2.对于 spring开发的细节问题 Spring框架里的bean,或者说组件,获取实例的时候都是默认的单例模式,这 ...

  10. 疯狂Java讲义PDF

    java学习资料,仅供学习交流,自行取用↓ 链接:https://pan.baidu.com/s/1dF1wCST 密码:i75g