1、如果这些产品图片文件“万年不变”,放在 /static 目录里,(不需要使用require将这些图片作为模块来引用)

var products = [{
img: '/static/img/products/1.png',
name: 'Product 1'
}, {
img: '/static/img/products/2.png',
name: 'Product 2'
}, {
img: '/static/img/products/3.png',
name: 'Product 3'
}, {
img: '/static/img/products/4.png',
name: 'Product 4'
}]

2、Vue实例数据的数组中只会保存图片文件路径,通过webpack打包不会将图片拷贝到dist目录中,所以本着模块化的思想下,应该用require来引用

var products = [{
img: require('@/assets/products/1.png'),
name: 'Product 1'
}, {
img: require('@/assets/products/2.png'),
name: 'Product 2'
}, {
img: require('@/assets/products/3.png'),
name: 'Product 3'
}, {
img: require('@/assets/products/4.png'),
name: 'Product 4'
}]

vue中assets文件夹与static文件夹的区别的更多相关文章

  1. vue 项目中assets文件夹与static文件夹引用的区别

    首先,assets文件夹和static文件夹在vue-cli生成的项目中,都是用来存放静态资源的. 1.assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式.build的时 ...

  2. assets文件夹与static文件夹的区别

    assets文件夹与static文件夹的区别原地址==>https://www.cnblogs.com/x123811/p/9230700.html 相同点===>assets文件夹和st ...

  3. vue中assets和static的区别

    Vue中assets和static的区别 再一次框架定型中,与同事在静态资源的存放上有了一些分歧,后来经过查阅总结如下: 相同点:   assets和static两个都是存放静态资源文件.项目中所需要 ...

  4. vue 中 assets 和 static 的区别

    Vue中的静态资源管理(src下的assets和static文件夹的区别)

  5. vue中如何在本地导入js文件

    import {setStore,setUser,getStore,removeStore} from "../../../public/localstory" 在导入js文件时, ...

  6. Vue中删除重复上传的文件

    上传控件: <el-upload class="upload-demo"  :on-change="filesChange"> filesChang ...

  7. vue中基于sortablejs与el-upload实现文件上传后拖拽排序

    今天做冒烟测试的时候发现商品发布有一个拖拽图片排序功能没做,赶紧加上 之前别的同事基于 vuedraggable 实现过这个功能,我这里自己深度封装了 el-upload ,用这种方式改动很大,而且感 ...

  8. vue中import xxx from 和 import {xxx} from的区别

    1.import xxx from import FunName from ‘../xxx’ 对应js中的引用: export defualt function FunName() { return ...

  9. 在java中public void与public static void有什么区别 ?

    public void 修饰是非静态方法,该类方法属于对象,在对象初始化(new Object())后才能被调用:public static void 修饰是静态方法,属于类,使用类名.方法名直接调用 ...

随机推荐

  1. windows超级实用快键键

    1 电脑锁屏Win + L 有些时候,需要暂时离开座位去处理其他事,可是电脑还有数据再跑. 关掉的话,数据就白跑了,不关的话,又不想让别人看到我电脑的资料. 那么就按住windows键后,再按L键. ...

  2. 架构师修炼 II - 表达思维与驾驭方法论

    开篇之前我想先说说当年开发的那点事儿:大约10年前吧,我还是一个程序员的时候经常都是遇到这样的项目开发流程: 解决方案 :满足客户目的和投标用的一堆文档(不少还是互联网上抄的) ,是以Word为主的纯 ...

  3. .NET Core容器化开发系列(零)——计划

    .NET Core相当完善的跨平台特性以及其轻量化的底层接口为我们能顺畅进行微服务开发提供了非常棒的基础. 作为支撑微服务最常见的基础技术--容器化将是本系列的核心内容. 接下来我计划用一个月左右的时 ...

  4. Python_xlutils.copy

    import xlrd import xlwt from xlutils.copy import copy # 读取工作簿 objWB = xlrd.open_workbook(r'C:\Users\ ...

  5. Python3 str去除空格

    一.去除str两端空格(strip()) a.去除左端空格  lstrip() str0='abcdef' str1=' abcdef' print(str0) print(str1.lstrip() ...

  6. 浅谈我的UI设计之路

    时光匆匆,进入UI学习已经快两个月了,这段时间过得很充实,因为有压力才有收获. 还记的刚刚学习手绘的时候,对于这个行业只有一个初步的认识,知道自己喜欢,但是真正学习的时候才发现,我要学习的东西还有很多 ...

  7. 金蝶盘点机PDA仓库条码管理家电类序列号扫描操作方法-采购入库单

    1.1.  采购入库单 传统的进销存管理软件需要人工识别商品品种,清点商品数量,然后再去人工手工在电脑上一行行的录入采购入库单.录单效率低,误差大. 如果使用汉码盘点机PDA,入库时,仓管员只需要手持 ...

  8. 关于使用AzureCli登陆提示SSLError的错误解决方案

    如果使用Powershell的azure cli命令登陆Azure时提示sslerror,大致如下的错误: 这个是由于你的网络前有网关造成的ssl验证没法通过. 解决方案: 在powershell中执 ...

  9. Google I/O 2018大会小结

    Google I/O 2018大会于北京时间5月9日凌晨1点,在美国山景城Shoreline Amphitheatre(圆形剧场)举办.看了一下录播,字幕延迟,全程靠听,下面对上午的主会进行一个小结. ...

  10. Github与SmartGit使用说明与建议

    当使用github做协同的时候,我们常常需要在客户端安装相应的软件,SmartGit就是一款非常出色的软件,不过是要付费的,我们可以使用non-commercial版本. Download: http ...