之前在打包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. oracle-ORA-01567错误

    删除日志4时将在线索1中保留少于两个日志文件

  2. docker-其它命令

    [root@iZ943kh74qgZ soft]# docker Usage: docker COMMAND A self-sufficient runtime for containers Opti ...

  3. windows和linux下读取文件乱码的终极解决办法！

    乱码是个很恶心的问题. windows和linux读取txt文件,一旦读取了,编码发生改变,就无法再还原了,只有重启项目. 网上有很多方法都是读取文件头,方法很好,但是亲测都不能用(右移8位判断0xf ...

  4. Mysterious Antiques in Sackler Museum（判断长方形）

    题目链接 参考博客Ritchie丶的博客 - UVALive 7267 Mysterious Antiques in Sackler Museum (判断长方形) 题意:大概意思就是判断四个矩形能不能 ...

  5. cocos2d-x游戏开发(十五)游戏载入动画loading界面

    这个资源载入的loading界面demo是在玩客网做逆转三国的时候随手写的,尽管我在那仅仅待了2个礼拜.可是也算參与了一个商业游戏项目了,学到不少东西.当时使用的cocos2d-x还是1.0版的,我用 ...

  6. BUAA 169 电话费

    http://oj55.bianchengla.com/problem/169/ 还有这个,不怎么好做,最后用栈做出来了. 感觉比较有用的一个数据是: 10 3 1010101010 代码如下: #i ...

  7. @codeforces - 1106F@ Lunar New Year and a Recursive Sequence

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 定义递推数列 f: (1)f[1] = f[2] = ... f ...

  8. oracle用Where子句替换HAVING子句

    避免使用HAVING子句, HAVING 只会在检索出所有记录之后才对结果集进行过滤. 这个处理需要排序,总计等操作. 如果能通过WHERE子句限制记录的数目,那就能减少这方面的开销. 例如: 低效: ...

  9. @noi.ac - 506@ 强连通分量

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 有一天你学了一个叫能求出有向图中所有的强连通分量的算法,你决定将 ...

  10. 使用提示(Hints)

    对于表的访问,可以使用两种Hints. FULL 和 ROWID FULL hint 告诉ORACLE使用全表扫描的方式访问指定表. 例如: SELECT /*+ FULL(EMP) */ * FRO ...