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. Spring Boot (十五): Spring Boot + Jpa + Thymeleaf 增删改查示例

    这篇文章介绍如何使用 Jpa 和 Thymeleaf 做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个 Demo 来试试它的效果,越 ...

  2. 前端示例MVC网站

    前端示例MVC网站 ASP.NET Zero 包含了一个公共web站点的前端页面和一个登陆页面.当您第一次运行项目的时候可以看到,如下图所示: 该前端网站有两个页面,一个是主页和关于我们.这些页面的内 ...

  3. 验证Xpath和CSS 路径是否有效

    XPath定位和CSS定位在Selenium中是经常使用的. 在FireFox浏览器和Chrome浏览器,可以使用这样的方法来验证定位是否准确. 以Chrome浏览器做范例 按键盘的F12 进入开发者 ...

  4. 使用Fidder从安卓模拟器获取APP内H5游戏网址

    大家都知道H5游戏其实是网页,但是有些APP或者微端不显示网址链接.这里给大家介绍介绍一种,利用Fiddler进行抓包,获取APP打开的网址的方法.有人说何必多此一举呢,直接用模拟器玩游戏就好了.的确 ...

  5. Bootstrap 样式设计 栅格系统

    .col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥992px) .col-lg- 大屏幕 大桌面显 ...

  6. PAT甲题题解-1073. Scientific Notation (20)-字符串处理

    题意:给出科学计数法的格式的数字A,要求输出普通数字表示法,所有有效位都被保留,包括末尾的0. 分两种情况,一种E+,一种E-.具体情况具体分析╮(╯_╰)╭ #include <iostrea ...

  7. 第三次spring冲刺2

    完成了对错题的收集,和做错题的功能,运用了android自带的SQLite数据库.

  8. 软工结对项目之词频统计update

    队友 胡展瑞 031602215 作业页面 GitHub 具体分工 111500206 赵畅:负责WordCount的升级,添加新的命令行参数支持(自定义输入输出文件,权重词频统计,词组统计等所有新功 ...

  9. [Week17] 个人阅读作业

      个人阅读作业Week17 reading buaa software   解决的问题 这是提出问题的博客链接:http://www.cnblogs.com/SivilTaram/p/4830893 ...

  10. UIView 添加闪烁的渐变光

    CGRect gradientRect=CGRectMake(- imageView3.bounds.size.width*, * imageView3.bounds.size.width, imag ...