vue中assets文件夹与static文件夹的区别
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文件夹的区别的更多相关文章
- vue 项目中assets文件夹与static文件夹引用的区别
首先,assets文件夹和static文件夹在vue-cli生成的项目中,都是用来存放静态资源的. 1.assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式.build的时 ...
- assets文件夹与static文件夹的区别
assets文件夹与static文件夹的区别原地址==>https://www.cnblogs.com/x123811/p/9230700.html 相同点===>assets文件夹和st ...
- vue中assets和static的区别
Vue中assets和static的区别 再一次框架定型中,与同事在静态资源的存放上有了一些分歧,后来经过查阅总结如下: 相同点: assets和static两个都是存放静态资源文件.项目中所需要 ...
- vue 中 assets 和 static 的区别
Vue中的静态资源管理(src下的assets和static文件夹的区别)
- vue中如何在本地导入js文件
import {setStore,setUser,getStore,removeStore} from "../../../public/localstory" 在导入js文件时, ...
- Vue中删除重复上传的文件
上传控件: <el-upload class="upload-demo" :on-change="filesChange"> filesChang ...
- vue中基于sortablejs与el-upload实现文件上传后拖拽排序
今天做冒烟测试的时候发现商品发布有一个拖拽图片排序功能没做,赶紧加上 之前别的同事基于 vuedraggable 实现过这个功能,我这里自己深度封装了 el-upload ,用这种方式改动很大,而且感 ...
- vue中import xxx from 和 import {xxx} from的区别
1.import xxx from import FunName from ‘../xxx’ 对应js中的引用: export defualt function FunName() { return ...
- 在java中public void与public static void有什么区别 ?
public void 修饰是非静态方法,该类方法属于对象,在对象初始化(new Object())后才能被调用:public static void 修饰是静态方法,属于类,使用类名.方法名直接调用 ...
随机推荐
- Python 学习 第三篇:数组类型(列表、字典和元组)
列表和字段都可以在原处进行修改,可以按照需求增长或缩短,并且可以包含任何类型的对象或被嵌套.列表和字典存储的是对象的引用,而不是拷贝. 一,列表 列表是有序的序列,每一个列表项的顺序是固定的,这使得列 ...
- 移动端H5页面上传图片或多张图片
传统PC网页上传文件,大家都已经熟悉,这里不做介绍. 本文简单介绍移动端常用上传图片功能.灵活使用轮询或长连接可实现PC与移动端数据同步,即PC端需要上传的图片是移动拍照下来或移动端硬盘储存的,不需要 ...
- redis安装启动和数据操作
redis安装和启动 1.安装包下载地址 >> redis基本数据类型 string(字符串和数值) .list(列表/队列).hashmap(哈希表[键唯一]). set(集合[值唯一] ...
- C# List left join
public class Test1 { public int ID { get; set; } public string Name { get; set; } } public class Tes ...
- FUNMVP:几张图看懂区块链技术到底是什么?(转载)
几张图看懂区块链技术到底是什么? 本文转载自:http://www.cnblogs.com/behindman/p/8873191.html “区块链”的概念可以说是异常火爆,好像互联网金融峰会上没人 ...
- DHCP介绍
DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议,使用UDP协议工作, 主要有两个用途:给内部网络或网络服务供应商自动分配IP ...
- 表格-table 样式
.table: 表格基本样式 .table-dark:表格显示为黑色 .thead-light: 表头显示颜色跟亮 .thead-dark:表头显示为黑色 .table-striped:表格以条纹形式 ...
- final版本发布评价II
其实我对技术上的问题了解不多,所以有些评语可能说的不对或者压根就没啥用.可直接忽略.请见谅. 1新蜂的俄罗斯方块,UI设计虽然给出了背景和颜色,但是感觉色彩对比也不好,模块之间也不协调.没有更多的说服 ...
- layout图形化界面看不到内容 Failed to find the style corresponding to the id
1.问题 在创建新的工程的时候,选择目标SDK为api21,编译SDK为api23.创建出来的layout文件图形化界面中看不到,并且报错: Failed to find the style corr ...
- ELK环境配置
一.安装java环境 1.下载jre并安装,安装过程中没有什么特殊的,一直默认下一步即可. 2.配置环境变量 其中变量值为我们安装的jre的路径 二.安装elasticsearch 1.下载es安装包 ...