之前在打包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. python 类的创建

  2. More Effective C++: 01基础议题

    01:仔细区别 pointers 和 references 1:没有所谓的null reference,但是可以将 pointer 设为null.由于 reference 一定得代表某个对象,C++ ...

  3. [转]GDB调试基础

    一.gdb常用命令: 命令 描述 backtrace(或bt) 查看各级函数调用及参数 finish 连续运行到当前函数返回为止,然后停下来等待命令 frame(或f) 帧编号 选择栈帧 info(或 ...

  4. openjudge dp水题记录

    当发现自己竟然不会打dp的时候内心是崩溃的,然后按照一年前的刷题记录刷openjudge,然后发现自己准确率比一年前(刚学信竞两个月时)的准确率低得多,已经没救. 列一下最近打的几道sb题 2985: ...

  5. hdu1532&&poj1273 最大流

    Dinic算法: 层次图:根据源点到该点的距离建图,这里设相邻的都差1. (下面部分转) 在这幅图中我们首先要增广1->2->4->6,这时可以获得一个容量为2的流,但是如果不建立4 ...

  6. spider csdn blog part II

    继续上次的笔记, 继续完善csdn博文的提取. 发现了非常好的模块. html2docx 结果展示: 运行之后, 直接生成docx文档. 截个图如下: 结果已经基本满意了!!! 在编写过程中的一些感想 ...

  7. OracleSpatial函数实例

    Oracle Spatial操作geometry方法   Oracle Spatial中SDO_GEOMETRY类型: CREATE TYPE SDO_GEOMETRY AS OBJECT( SDO_ ...

  8. Streamy障碍一：大批量条目

  9. Libev源码分析08：Libev中的内存扩容方法

    在Libev中,如果某种结构的数组需要扩容,它使用array_needsize宏进行处理,比如: array_needsize (int, fdchanges, fdchangemax, fdchan ...

  10. laravel5.4 前后台未登陆，跳转到各自的页面

    https://www.imooc.com/wenda/detail/378208?t=266634 laravel我做了前后台登陆,后台未登录跳转到前台登陆页面了. 我想让后台未登入跳转到后台登陆页 ...