png

### 你可能注意到了我们的静态资源共有两个目录src/assets和static/，你们它们之间有怎样的区别呢？ 资源打包 为了回答这个问题，我们需要了解webpack是如何处理静态资源的。 在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查询资源的URLs解析. 比如说, 在 img src=”./logo.png” 和 background: url(./logo.png) 中./logo.png是一个相对资源路径，并且会被Webpack视为一个模块依赖来解析。 因为./logo.png并非一个Javascript，当将它作为模块依赖对待时，我们需要用url-loader和file-loader去处理它。这种公式化处理早已经为你配置了loader，所以你基本上可以获得诸如文件名指纹和有条件的内嵌base64，因此你能够使用相对/模块路径而不必担心部署问题。 自从这些资源可以在build期间被内联/复制/重命名，它们本质上来讲是你资源代码的一部分。这就是为什么它们被推荐用于延源资源替换Webpack-processed的内部/src资源。事实上，你甚至不必将它们放进/src/assets：你可以基于模块/组件去组织它们并使用，你可以将每一个组件放进他们自己的文件夹，随着它的静态文件正确的紧挨着它。

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:

本文章来自于 艾某人 的网易博客。 在网站开发中，我们经常会用到背景图，或者是数据图，这些都是图片，我们常用的图片的文件格式有三种：GIF，JPG，PNG。这三种图片格式具有不同的特点，对动画、透明度支持的情况不同，同时对色彩的处理也不同。我们在开发的过程中只有选择合适的图片格式，才能使我们的开发速度更快。 在面试的过程中，发现被问的很频繁的是有关于图片格式的问题，这时候才猛然发觉我对这些问题知之甚少，仅停留在表面的一些认知，可能表面的认知也是需要提一下的，但是对于图片的认识越深，才能在选用的过程中选择最适合当前状况的图片格式。 如果对这些图片格式一无所知，为了单纯追求高清晰度的图片效果，或许会做出单一或者叫错误的选择。 gif图片格式 首先，gif格式的图片支持全透明，意思就是它并不支持半透明，仅可以是全透明或完全不透明，这是相对于png而言的。 其次，gif支持动画。1个gif文件中可以存储多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。 总结起来，gif广泛支持Internet标准，支持无损耗压缩和透明度，支持动画。但同时，gif格式不适合高清晰度图片，也不支持半透明显示。 jpg图片格式 引用一下，“JPG图片以24位颜色存储单个光栅图像。JPG是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的