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

最新推荐文章于 2023-09-18 20:07:38 发布
最新推荐文章于 2023-09-18 20:07:38 发布
阅读量2.6k 收藏
点赞数
分类专栏： study progress 文章标签： svg js base64
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN_smartyang/article/details/113525253
版权
在React项目中遇到SVG图片线上无法正常显示的问题，即使配置了webpack也无效。为解决此问题，尝试将SVG转换为base64编码进行显示，可以使用在线工具或npm包svg64进行转换。尽管转换能解决问题，但这种方式并非最佳实践，期待更多解决方案。
摘要由CSDN通过智能技术生成

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

<img  src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+5o+Q56S6PC90aXRsZT4KICAgIDxnIGlkPSLkvIHkuJrlvq7kv6EiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSI144CB5Lqk5LqS6K+05piOIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjY3LjAwMDAwMCwgLTc3NS4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8ZyBp
最低0.47元/天 解锁文章
Dawn_pre
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 使用d3.js加载 svg 并将svg转为file格式上传
hjs_xxq的博客
09-07 1137
vue 使用d3.js加载 svg 并将svg转为file格式上传
react umi中使用svg线上图片不加载问题
MYG_G
06-28 1612
react中使用svg的几种方法，解决svg加载失败问题
react引入图片不显示
weixin_49662044的博客
11-18 2001
2.通过import或者require方式引入,通过赋值的方式显示。1.检查地址是否正确，如果不正确，换成正确的地址。使用react开发时，引入的图片在浏览器不显示。2.在react中，不支持直接引入。
初学前端-记使用阿里图库SVG图标不显示的解决方法
zxc1207893278的博客
08-23 1642
使用VUE3+Element-Plus做来制作前端界面，做到左侧菜单栏时遇到了一个困难，添加的SVG图标始终不显示，位置存在，图标的信息也没有问题，但是就是一直显示不出来。的提示在Main.js中导入了inonfont.js文件后正常显示import './assets/fonts/iconfont/iconfont.js'的错误，但是不理解，不知从何下手。原来都是做上位机程序的第一次接触前端这种，感觉着实有些吃力，还有继续努力呀。其实在调试时浏览器中也报了。
本地显示svg正常显示，在工程项目中无法正常显示
weixin_30776863的博客
04-01 568
提前说明：此文仅记录个人项目问题，不具有众参考意义。 原因： 工程中对引用的资源进行解析设置，即resource设置。 解决方法： 找到静态资源加载路径，添加 if(urlpostfix.equals("svg")){ MediaType mediaType=MediaType.IMAGE_SVG; } 即： 获取加载资源后缀名为svg的文件后，将其svg类型进行返回，若没加，则...
react开发笔记(一)：渲染验证码图片报错data:image/svg+xml；base64,undefined net::ERR_INVALID_URL
summer_gf的博客
11-19 1513
刚进入页面的时候img的src会报错data:image/svg+xml;base64,undefined net::ERR_INVALID_URL，解决办法就是在请求返回的时候拼接好src再赋值到img。
React - 连连看小游戏 对应图片资源
最新发布
04-04
在React中，我们可以使用`import`语句将这些图片导入到我们的组件中，然后将它们作为`Cell`组件的属性传递。例如： ```jsx import appleIcon from './icons/apple.png'; const Cell = ({ icon, onClick }) => ( ...
前端开源库-babel-plugin-inline-react-svg
08-30
3. 引入SVG：在React组件中，直接导入SVG文件，它会被转换成内联的SVG元素。 ```jsx import Logo from './logo.svg'; function App() { return ; } ``` **三、优点与注意事项** - **优点**： - 减少HTTP...
vue动态渲染svg、添加点击事件的实现
12-28
业务需求(vue项目中) 1.页面展示svg内容 ...3.动态改变svg内部元素的属性和值 ...直接将svg文件的内容复制粘贴到.vue文件里，是可以在标签内直接添加@click事件完成需求的，方式简单但会造成文件过长，本文
es6-react-scss-boilerplate:Webpack挑战，单项输入，ES6，React（jsjsx），SCSS导入（输出单CSS），img和svg> 1到链接，较小的SVG到base64编码的字符串
05-12
zillow-webpack 我已经制作了一个与以前类似的。 怎么跑 参见{package.json} .scripts ... 处理扩展名为.svg的SVG文件； 如果文件> 1mb，则返回一个以64为基数的数据编码的字符串，否则返回该文件的ling。
savagejsx:将svg转换为React成分的实用程序
05-09
- **可复用性**：SVG组件可以作为独立的模块，多次复用在不同的地方，无需重复导入SVG文件。 - **组件化**：通过组件化SVG，可以更方便地组合、组合和修改图形，适应不同的设计需求。 在压缩包`savagejsx-master`中...
用于 React Native 的强大交互式图像拼贴组件
06-08
导入：从“react-native-images-collage”导入 { DynamicCollage, StaticCollage }; 动态拼贴 动态拼贴包括平移、缩放、替换和图像排列。 ) } editButtonPosition: { '左上' | '右上角' | '左下' | 'bottom-right' }...
react-qrcode:这是qrcode.js的React.js包装器
05-15
2. **易用性**：通过props传递数据和配置，比如`value`用于设置二维码的内容，`style`和`className`可以自定义样式，`level`用来设置错误纠正级别（L, M, Q, H），`renderAs`则可以选择渲染方式（img, canvas, svg）...
hellow-react:第一个React项目
05-09
在本项目"Hello-React: 第一个React项目"中，我们将会探讨React的基本概念和如何构建你的第一个React应用。React是Facebook开发的一个用于构建用户界面的JavaScript库，它专注于视图层，允许开发者构建可复用和可...
React Native加载网络图片失败
qq_16231975的专栏
07-26 4601
上一张                                                                                                   下一张                                                                 网络图片加载
关于SVG图片不显示
热门推荐
07-11 2万+
SVG不显示该怎么解决 SVG不显示该怎么解决
react-native 网络图片有时显示，有时不显示(也可解决App卡顿问题)
前端阿皓
01-16 1446
react-native 网络图片有时显示，有时不显示 解决方案 1、给Image添加 resizeMethod=“resize” <Image source={{uri:"路径"}} style={{width:100,height:100}} resizeMethod="resize"></Image> resizeMethod ：当图片实际尺寸和容器样式尺寸不一...
【React】如何在React中通过svg字符串加载图片
weixin_44204511的博客
09-18 485
在React中，对于本地的svg图像文件可以直接引用,然后在img标签中使用，就可以成功渲染。但最近在项目中通过api获取到了svg字符串，需要渲染到页面上，直接像上面那样引用是失败的。
如何使用react-native-svg和react-native-svg-transformer加载本地svg图片
09-06
要使用 `react-native-svg` 和 `react-native-svg-transformer` 加载本地 SVG 图像，你可以按照以下步骤进行操作： 1. 首先，确保你已经在项目中安装了 `react-native-svg` 和 `react-native-svg-transformer` 依赖...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值