之前在打包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. SDUT-3375_数据结构实验之查找三：树的种类统计

    数据结构实验之查找三:树的种类统计 Time Limit: 400 ms Memory Limit: 65536 KiB Problem Description 随着卫星成像技术的应用,自然资源研究机 ...

  2. Precision和Recall

    学习自: http://blog.csdn.net/wangran51/article/details/7579100

  3. python系列之（2）PyQuery的用法

      1.了解 pyquery库是jQuery的Python实现,能够以jQuery的语法来操作解析 HTML 文档,易用性和解析速度都很好. 2.安装 pip install pyquery 3引用 ...

  4. acm一路走来的体验和想法

    2017年参加天梯赛 作为大一萌新去参加人生第一场正规的比赛,学校拿钱砸的.我呢,是十分激动的,是时候检验下自己的编程水平了,也有一丝慌张,怕给团队抹黑. 然后呢,晒一下自己成绩. 我本来觉得我和他们 ...

  5. 介绍配置管理工具SVN的使用

    配置管理CM(Configuration Mangerment) 一.配置管理工具SVN的介绍 ---Subversion ---是一个开放源代码的版本控制系统 ---时下流行的SVN和GIT 每天开 ...

  6. 在Swift中检查API的可用性

    http://www.cocoachina.com/swift/20150901/13283.html 本文由CocoaChina译者ALEX吴浩文翻译自Use Your Loaf博客 原文:Chec ...

  7. 使用UITextView的dataDetectorTypes实现超链接需要注意的事项！

    项目中需要在UITextView上识别URL,手机号码.邮箱地址等等信息.那么就用到了它的dataDetectorTypes属性.我的UITextView加在UITableViewCell上面的,当单 ...

  8. thinkphp5.0中英文切换

    首先来看下它的配置: // 是否开启多语言 'lang_switch_on' => true, //语音列表 'lang_list' => ['zh-cn','en-us'], // 获取 ...

  9. 【uml】之类图中的关系 标签： uml图形类 2014-11-29 09:02 1198人阅读 评论(23)

    uml早就画完了图,但是自己迟迟没有总结,因为总觉的自己把握的不到位,虽然现在也还是不到位,废话少说,上篇博客总结了用例图中的几种关系,这篇就讨论一下类图中的几种关系. 在uml的所有图中,就我目前的 ...

  10. margin负边距的使用（超简单）

    写在开头: 在css的世界中,一切都是框,所有的框都处于流动的状态 margin负边距可以使文档流发生偏移   在没有设置margin-bottom的时候,parent的高度会跟随child的内部元素 ...