webpack打包后图片显示问题

1、先解释一下这段配置代码的意思，test是正则匹配规则，匹配项目中所有的以正则规则结尾的格式的文件，然后通过url-loader进行处理，不大于10kb就会进行base64转码，就是将图片转为base65格式，如果超过10KB的图片就单独打包到utils.assetsPath(‘img/[name].[hash:7].[ext]’) 这个目录下，也就是static/img/图片名，

2、注意相对路径标识’./’,我们知道img为html标签，他的路径是由index.html开始访问的，他走./static/img/'图片名'是能正确访问到图片的，所以img的路径没问题，然后app.css访问./static/img/'图片名'是访问错误的，因为在css目录下并没有static目录。这样就造成了路径访问失败的问题。（这就是背景图片没有显示的原因）

3、解决方法：

检查config文件中的assetsPublicPath是否设置为’/’而不是’./’
注意区分’/’为绝对路径，绝对路径从网站静态服务器根目录查询/static/img/图片，这样的路径就是正确的，如果设置为’./’，路径就变成了相对路径，相对路径会根据相对的文件目录来确定文件资源，会造成上面分析的问题
vue-cli创建的vue项目，会自带一个static目录，将出错图片放在该目录下面即可（正确解决办法）
查看vue-cli创建项目的webpack配置文件可以找到一个将static目录拷贝到dist目录中。根据对资源的规划不同，将需要打包的资源放在src/assets目录中，不需要打包的资源放入static目录中。
背景图片的解决方法：background:url('../../assets/images/bg.png');被相对打包后变成了url('static/img/bg.png')所以我们必须保留css引用图片的正确路径即：url('../../static/img/bg.338948.png') 我们需要在build文件夹下的utils.js做一下修改添加这一行代码即可。

关于base64

优点：base64就是一串字符串码来表示的图片，在加载页面或者js的时候就一并加载过来，减少图片引用时单独的一次http请求。了解web端性能优化的同学都知道，http请求每次建立都会占用一定的时间，对于小图请求来说，可能http建立请求的时间比图片下载本身还长。所以对小图进行base64转码是优化http请求，保证页面加速渲染的一种手段。

缺点：base64缺点就是之前提到的，他会增加图片本身的大小，对小图片来说，增加大小导致js的请求增长完全能弥补多一个http请求的建立的时长，这种取舍是划算的。可是对于大图来说，这样的取舍是不划算的。

webpack打包后图片显示问题相关推荐

vue项目使用webpack打包后,图片不显示
1.问题及解决原因 vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来. 查看控制台也没有报错. 错误原因是Webpack打包之 ...
html模块殃射,【Web前端问题】webpack打包后，module模块中的函数无法在html标签的事件中调用？...
折腾了好久,求大佬指点~~最近才开始接触webpack以及ES6的module,可能理解的有问题吧...希望大佬来指点一下我这个菜鸟. 我的想法是在一个module中定义函数,在HTML的中用oncl ...
react打包后图片丢失_宜信技术实践｜指尖前端重构（React）技术调研分析
一.为什么选择React React是当前前端应用最广泛的框架.三大SPA框架 Angular.React.Vue比较. Angular出现最早,但其在原理上并没有React创新的性能优化,且自身相对 ...
vue-webpack打包后图片找不到
一.问题描述项目在使用webpack打包后,很常见的一个问题就是dev环境可见的图片在打包之后找不到文件. 二.异常原因 1.图片未被打包当使用的图片url是动态拼接的,可能会出现webpack没 ...
vue 不生效打包样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
在vue项目中webpack打包后字体不生效
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
使用webpack打包后，vscode中vue代码变白色的解决办法
使用webpack打包后,vscode中vue代码变白色的解决办法卸载vetur,重装vetur
webpack打包后引用cdn的js_利用CDN加速react webpack打包后的文件详解
此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档. 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置) ...
react打包后图片丢失_手搭一个 React，Typescript，Koa，GraphQL 环境
本文系原创,转载请附带作者信息:yhlben 项目地址:https://github.com/yhlben/cdfang-spider 前言在实际的开发过程中,从零开始初始化一个项目往往很麻烦,所以 ...

webpack打包后图片显示问题

关于base64

webpack打包后图片显示问题相关推荐

最新文章

热门文章