之前在打包react项目时发现一些问题，打包出来后我的一部分png图标加载不出来，开发者模式发现他们的路径中莫名其妙混入了我在react-router路由中使用<Browserrouter>的路由名称，网上看到有一种方法是使用Hashrouter，但我的一些功能不允许因此这个方式自然不行，但是我却发现另一个问题，同样的png图片为什么偏偏那几个出不来，我进入开发者模式发现另外那些显示正常的png图片全部被转换成了base64，所以不存在加载静态资源的问题，那为什么不把这几个显示错误的也把他们转换为base64呢。这个时候我发现在react打包后的build文件夹里，static文件夹里有了一个media文件夹

在里面我发现了所有显示不正常的图片，继而发现凡是显示不正常的图片都在这个文件夹里以路径的方式载入，但又因为<Browserrouter>的某种不知名原因，导致实际上并不能正确加载他们。这些图片有一个共同点，就是体积相对显示正常的png图片体积较大，有几十K左右，于是果然发现这是webpack在打包时候的配置规则，找到项目目录node_modules文件夹下的这个路径

更改图中高亮这个文件

适当调高limit值即可将图片转换为base64而不会存在路径问题

关于react打包之后静态资源加载错误的问题的更多相关文章

  1. vue 项目打包后静态资源加载不到

    1, 2,

  2. SpringMvc静态资源加载出错

    使用mvc:resource配置 web.xml配置是rest风格的/ 服务器启动没问题 访问地址是报404 另外用了default-servlet的方法加载,服务器启动没错,jsp页面加载静态资源要 ...

  3. springMVC servlet 静态资源加载

    问题描述 新手使用SpringMVC时市场会遇到静态资源无法加载在问题,如下图所示 问题原因 出现这种问题一般是在web.xml中的对spring的DispatcherServlet采用了如下配置,即 ...

  4. 关于web项目中静态资源加载不了的一些解决思路

    问题的产生: <!--springMVC前端控制器加载--> <servlet> <servlet-name>springmvc</servlet-name& ...

  5. Springboot中jar 重复冲突 导致 静态资源加载问题！

    这个jar 其实在common 中也是存在的  ,当时没注意看,就导入进来了,然后  css js 等一些静态资源全部不能加载!具体原因我没去深挖!后面找个时间深挖下,先填坑!

  6. 【Bug档案01】Spring Boot的控制器+thymeleaf模板 -使用中出现静态资源加载路径不当的问题 -解决时间:3h

    总结 - thymeleaf的模板解析规则不清楚,或者忘了; - 出现bug时,瞎调试, 没有打开NETWORK 进行查看资源的加载情况 - 控制器中的其他代码,可以先注释掉,这样就可以迅速屏蔽掉其他 ...

  7. Springboot：静态资源加载（七）

    WebMvc自动配置: 搜索WebMvcAutoConfiguration自动装配类: 第一种方式通过webjars加载静态资源: https://www.webjars.org(通过maven加载依 ...

  8. spring boot的静态资源加载

    1.spring boot默认资源处理 Spring Boot 默认为我们提供了静态资源处理,使用 WebMvcAutoConfiguration 中的配置各种属性. spring boot默认加载文 ...

  9. spring boot开发 静态资源加载不出来

    spring boot 1.5 版本之前 不拦截静态资源 springboot 2.x版本 拦截静态资源 private static final String[] CLASSPATH_RESOURC ...

随机推荐

  1. SPARK-SQL内置函数之字符串函数

    转载请注明转自:http://www.cnblogs.com/feiyumo/p/8763186.html 1.concat对于字符串进行拼接 concat(str1, str2, ..., strN ...

  2. 运行docker容器镜像2(指定容器启动时启动的脚本)

    docker中启动容器有以下两种情况. 第一种是通过 # docker run containerid 启动一个容器. 第二种是重新启动已经关闭的容器. # docker start containe ...

  3. 微信小程序开发资源整理

    有兴趣学习微信小程序开发的可以关注简书专题 微信小程序开发 由于微信已经开发文档和开发工具了,所以下面的内容用处不大了. 具体参考:http://mp.weixin.qq.com/wiki/ 这篇文章 ...

  4. maven修改版本号

    1.修改版本 mvn versions:set -DnewVersion=xxx 2.回滚版本,提交后不能回滚 mvn versions:revert 3.提交版本变更 mvn versions:co ...

  5. ROS出现“Couldn't find executable named listener below //home/xxx/catkin_ws/src/mypack”问题

    在执行节点时出现了如下图所示的错误: 错误原因是在路径下找不到可执行的节点文件.但事实是已经对工作空间进行了编译,并且在devel /lib/my_serial_node 中已经生成了可执行文件. 如 ...

  6. 【Flask源码分析——请求上下文与应用上下文】

    Flask中有两种上下文,请求上下文和应用上下文.两者的作用域都处于一个请求的局部中. 查看源代码,上下文类在flask.ctx模块中定义 AppContext类定义应用上下文,app是当前应用Web ...

  7. Round #590 (Div. 3)

    拿DIV找快乐... 当场过了A-B1-B2-C 写D差5分钟写的是正解...留坑补FG A. Equalize Prices Again 直接判断sum%n==0?sum/n:sum/n+1 B1, ...

  8. MapReduce数据流-Reduce

  9. C++ 结构体的定义

    struct 结构体名称{    数据类型 A:    数据类型 B; }结构体变量名; 相当于: struct 结构体名称{    数据类型 A:    数据类型 B; }; struct 结构体名 ...

  10. css设置Overflow实现隐藏滚动条的同时又可以滚动

    .scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-x: auto; overflow- ...