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进来

    需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...

  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中通过修改element-ui的类修改相关组件的样式

    可以在App.vue中的style中修改element-ui的样式. 注意:一定要在属性值后面加上 !important 使自己定义的css样式处于权重最高,不加的话在本地调试的时候是没有问题的,不过 ...

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

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

随机推荐

  1. 三维GIS引擎地图可视化渲染方案设计

    1.GIS地图可视化流程 GIS地图可视化就是将空间数据转化为地图数据再进行交互处理的方法,下图一展示了地图可视化的可编程渲染的典型管道,原始空间数据必须处理为图形API支持基础图元用以地图渲染.下图 ...

  2. 测试 - 某网站ACCESS数据库注入漏洞

    元宵节 团团圆圆总少不了一篇文  测试是否有注入 测试数据库类型 后面不用注释猜到可能是access 验证一下 这里说一下MySQL和ACCESS以及MSSQL的判断语句 MySQL:and len ...

  3. vue-element-admin中是如何配置浏览器中的页面标题

    因为在vue-element-admin中杈哥是写个一个动态路由标题,就是说你点进那个页面,它会显示对应页面的标题,所以我们仅仅在index页面进行修改是没有用的,那么我们改如何修改呢? 找到perm ...

  4. 学习scrapy爬虫框架的一些经验和教训

    首先python的scrapy框架很好,功能强大,使用起来也很方便,省去了很多造轮子的时间.在学习的过程中也碰到了一些问题,在这里希望能分享与大家分享,做一个参考 1.安装(pip延时响应问题) sc ...

  5. 一些Nmap NSE脚本推荐

    前言 Nmap是一款强大的开源扫描工具.同时Nmap提供了强大的脚本引擎(Nmap Scripting Engine),支持通过Lua脚本语言来扩展Nmap的功能,在Nmap的发行版中已经包含了数百个 ...

  6. CF1327C Game with Chips 题解

    原题链接 简要题意: 每个点有起始目标和终点(二维).要求每次将所有点向一个方向移动一次(四方向,若出界则不变),使得每个点均 经过 其终点. 本题只要抓住本质,瞬间得解. 你会发现,如果要求每个点最 ...

  7. 常见排序算法总结与分析之交换排序与插入排序-C#实现

    前言 每每遇到关于排序算法的问题总是不能很好的解决,对一些概念,思想以及具体实现的认识也是模棱两可.归根结底,还是掌握不够熟练.以前只是看别人写,看了就忘.现在打算自己写,写些自己的东西,做个总结.本 ...

  8. laravel中间件的创建思路分析

    网上有很多解析laravel中间件的实现原理,但是不知道有没有读者在读的时候不明白,作者是怎么想到要用array_reduce函数的? 本文从自己的角度出发,模拟了如果我是作者,我是怎么实现这个中间件 ...

  9. Hive视图如何创建、特点及应用场景

    Hive视图特点 View是逻辑存在,Hive暂不支持物化视图(1.0.3) View只读,不支持LOAD/INSERT/ALTER.需要改变View定义,可以是用Alter View View内可能 ...

  10. TPYBoard v202开发板通过I2C协议驱动oled

    最近无聊的时候研究了一下TPYBoard v202开发板,发现网上TPYBoard开发驱动oled的这块资料比较少,本人测试成功后给大家分享一下经验 下面通过代码讲解一下 1.首先需要导包, 在网上下 ...