关于react里的 img导入svg图片在线上不能正常显示的问题

最新推荐文章于 2025-09-18 17:56:58 发布

原创最新推荐文章于 2025-09-18 17:56:58 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#svg #js #base64

study progress 专栏收录该内容

19 篇文章

订阅专栏

在React项目中遇到SVG图片线上无法正常显示的问题，即使配置了webpack也无效。为解决此问题，尝试将SVG转换为base64编码进行显示，可以使用在线工具或npm包svg64进行转换。尽管转换能解决问题，但这种方式并非最佳实践，期待更多解决方案。

一般我们会在webpack里配置
但是我遇到配置完也不能在线上正常显示，这里已经找不出其他原因，但是png能够显示，所以我考虑到换成png，但是放大会模糊，这也是这个的缺点，于是我只好转成base64去显示
可以在线上手动转换后引入
https://base64.guru/converter/encode/image/svg

<img  src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+5o+Q56S6PC90aXRsZT4KICAgIDxnIGlkPSLkvIHkuJrlvq7kv6EiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSI144CB5Lqk5LqS6K+05piOIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjY3LjAwMDAwMCwgLTc3NS4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8ZyBpZD0i6YKu566x55m75b2VIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDQuMDAwMDAwLCA2NzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2My4wMDAwMDAsIDk0LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSLmj5DnpLoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAzLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0i55+p5b2iIiBmaWxsPSIjQkZDN0Q1IiBvcGFjaXR5PSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTgsMSBDNC4xMzM3MzA2MSwxLjAwMDI3NjE0IDAuOTk5NzIzODU4LDQuMTM0NzMwNjEgMSw4LjAwMSBDMS4wMDAyNzYxNCwxMS44NjcyNjk0IDQuMTM0NzMwNjEsMTUuMDAxMjc2MSA4LjAwMSwxNS4wMDEgQzExLjg2NzI2OTQsMTUuMDAwNzIzOSAxNS4wMDEyNzYxLDExLjg2NjI2OTQgMTUuMDAxLDggQzE1LjAwMDcyMzksNC4xMzM3MzA2MSAxMS44NjYyNjk0LDAuOTk5NzIzODU4IDgsMSBaIE05LjA5NywxMC41NzYgQzguNTY5LDExLjM2OSA4LjAzMSwxMS45ODEgNy4xMjcsMTEuOTgxIEM2LjUxLDExLjg4IDYuMjU2LDExLjQzNyA2LjM5LDEwLjk4NyBMNy41NTMsNy4xMzUgQzcuNTgyLDcuMDQgNy41MzUsNi45NCA3LjQ0OSw2LjkwOSBDNy4zNjMsNi44NzggNy4xOTUsNi45OSA3LjA0OSw3LjE0OSBMNi4zNDcsNy45OTUgQzYuMzI3LDcuODU0IDYuMzQ0LDcuNjE5IDYuMzQ0LDcuNTI0IEM2Ljg3Myw2LjczMSA3Ljc0LDYuMTA1IDguMzI5LDYuMTA1IEM4Ljg4OSw2LjE2MyA5LjE1Myw2LjYxIDkuMDU2LDcuMTAxIEw3Ljg4NSwxMC45NzIgQzcuODcsMTEuMDYgNy45MTYsMTEuMTQ4IDcuOTk1LDExLjE3NiBDOC4wODEsMTEuMjA3IDguMjYyLDExLjA5NSA4LjQwOCwxMC45MzUgTDkuMTEsMTAuMDkgQzkuMTI5LDEwLjIzMiA5LjA5NywxMC40ODIgOS4wOTcsMTAuNTc2IEw5LjA5NywxMC41NzYgWiBNOC45NDEsNS41NDQgQzguNDk2LDUuNTQ0IDguMTM2LDUuMjIxIDguMTM2LDQuNzQzIEM4LjEzNiw0LjI2NiA4LjQ5NywzLjk0MiA4Ljk0MSwzLjk0MiBDOS4zODYsMy45NDIgOS43NDYsNC4yNjYgOS43NDYsNC43NDMgQzkuNzQ2LDUuMjIxIDkuMzg2LDUuNTQ0IDguOTQxLDUuNTQ0IFoiIGlkPSLlvaLnirYiIGZpbGw9IiNGMDVFNUUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==" />

还可以用npm包转
https://www.npmjs.com/package/svg64
这里可以参考一下，有更好的办法欢迎指教