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. CS50.4

    1, PDF,portable document format 便携式文档格式 2, 关于文本编辑器(文字编辑器)和文档编辑器(文字处理器),前者可用来写程序的源代码?名字挺难分辨的. *3, “-o ...

  2. Spring Boot (十三): Spring Boot 小技巧

    一些 Spring Boot 小技巧.小知识点 初始化数据 我们在做测试的时候经常需要初始化导入一些数据,如何来处理呢?会有两种选择,一种是使用 Jpa,另外一种是 Spring JDBC .两种方式 ...

  3. .Net Core WebApi控制器接收原始请求正文内容

    主要目标 在Asp.net Core控制器中,通过自定义格式化程序来映射自定义处理控制器中的“未知”内容. 简单案例 为了演示这个问题,我们用VS2017创建一个默认的Asp.net Core Web ...

  4. CSS 天坑 I - 字体单位

    首先,本文所讨论的“坑”是在做回应式网页设计( Responsive Web Design 以下简称 RWD)时显现的,如果你还只是在做传统的Web设计这算不上是一个坑,因为传统的Web页面是死的,不 ...

  5. MODIS 数据产品预处理

    MODIS 数据产品预处理 1  MCTK重投影 第一步:安装ENVI的MCTK扩展工具 解压压缩包,将其中的mctk.sav与modis_products.scsv文件复制到如图所示,相应的ENVI ...

  6. 微软职位内部推荐-SW Engineer II for Embedded System

    微软近期Open的职位: Do you have a passion for embedded devices and services? &nbsp Does the following m ...

  7. “北航Clubs” Beta版本开发目标

    Beta版本开发目标 总体设想:修复Alpha版本中的若干bug,并在Alpha版本成果之上进行进一步开发,实现社员管理.评论.站内信等功能. 1.对Alpha版本功能的更新与加强 后端实现从SQLi ...

  8. 《Linux内核分析》第五周学习总结 扒开系统调用的三层皮(下)

    扒开系统调用的三层皮(下) 郝智宇 无转载 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.给Men ...

  9. C语言入门:03.关键字、标识符、注释

    一.学习语法之前的提醒 (1)C语言属于一门高级语言,其实,所有高级语言的基本语法组成部分都是一样的,只是表现形式不太一样 (2)就好像亚洲人和非洲人,大家都有人类的结构:2只 手.2只脚.1个头,只 ...

  10. 【设计模式】—— 组合模式Composite

    前言:[模式总览]——————————by xingoo 模式意图 使对象组合成树形的结构.使用户对单个对象和组合对象的使用具有一致性. 应用场景 1 表示对象的 部分-整体 层次结构 2 忽略组合对 ...