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

最新推荐文章于 2024-04-11 18:11:25 发布
原创 最新推荐文章于 2024-04-11 18:11:25 发布 · 2.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#svg #js #base64

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

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

<img  src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+5o+Q56S6PC90aXRsZT4KICAgIDxnIGlkPSLkvIHkuJrlvq7kv6EiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSI144CB5Lqk5LqS6K+05piOIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjY3LjAwMDAwMCwgLTc3NS4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8ZyBpZD0i6YKu566x55m75b2VIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDQuMDAwMDAwLCA2NzguMDAw
最低0.47元/天 解锁文章

200万优质内容无限畅学
【React-Native】批量引入svg并导出脚本
Li-的博客
11-04 677
文章目录前言一、新建一个js文件用于生成导出文件二、使用及其注意事项1.使用2.注意事项 前言 在Rn中无法直接引用svg图片，我们习惯用react-native-svg或react-native-svg-transformer来帮助我们使用svg图片。 用法： import About from './svg/about.svg'; <About width={10} height={10} /> 由于每个svg图片都需要引入，就会造成每个页面代码都是一大串的svg引入。因此想写一个文.
react前端显示图片_在 React 中使用 SVG 图标组件
weixin_39825941的博客
12-19 2213
SVG 很酷，它们能放大放小。那么 SVG 的优点是什么？SVG 或可缩放矢量图形是基于 XML 的格式图像格式，可以在保持图像质量的同时缩放到任何大小。因此，当你需要根据需要调整大小的图像时，SVG 是可行的方法。它们基本上是 XML 文档，因此与其他图像格式相比，它们的文件大小也很小。它们也是有效的 XML 元素，可以使用 CSS 进行操作。所以在 SVG 上改变颜色和笔画都可以通过 CSS ...
react umi中使用svg线上图片不加载问题
MYG_G
06-28 1962
react中使用svg的几种方法，解决svg加载失败问题
react引入图片不显示
weixin_49662044的博客
11-18 2133
2.通过import或者require方式引入,通过赋值的方式显示。1.检查地址是否正确，如果不正确，换成正确的地址。使用react开发时，引入的图片在浏览器不显示。2.在react中，不支持直接引入。
项目引入svg格式图片无效
刘珈佚的博客
12-09 1030
react中引入svg格式图片无效 解决办法 import LogoSvg from '../../../public/logo-ant.svg'; <img src={LogoSvg} alt="logo" title="首页" />
img标签引用图片资源无法显示的问题
热门推荐
六月星海的博客
08-26 3万+
概述：主要解决无法引用网络图片与加载本地图片的问题 1.无法引用网络图片 如： &lt;label&gt;加载网络图片：&lt;/label&gt; &lt;img src="http://upload.techweb.com.cn/2017/0106/1483690985396.jpg" width="200px" height="200px" /&gt; 解决方案:在html5或j..
img标签 src 引用图片资源无法显示的问题
YinXiaobo
11-06 3万+
img标签 src使用网络资源在IE中无法加载显示 &lt;img alt="" src="http://xxx.xxx.io/assets/web/xxx.png"&gt; 解决方案:在 header 加入 meta &lt;meta name="referrer" content="never"&gt; ...
React Native项目中轻松导入SVG文件的解决方案
- **导入SVG文件：** 在React组件中，像导入其他图片资源一样导入SVG文件，但注意文件的扩展名应保持为.svg。 示例代码如下： ```javascript import Logo from "./logo.svg"; // 在React Native组件中使用Logo `...
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。
前端开源库-babel-plugin-inline-react-svg
08-30
3. 引入SVG：在React组件中，直接导入SVG文件，它会被转换成内联的SVG元素。 ```jsx import Logo from './logo.svg'; function App() { return ; } ``` **三、优点与注意事项** - **优点**： - 减少HTTP...
react svg 导入错误
判断一个点是否在闭合曲线内
11-20 1358
在react组件中import这有由于没有找到svg文件的声明，可以用如下方法解决。
html svg图片不显示,HTML对象SVG图像不显示
weixin_28829325的博客
06-04 663
我有一个这样的HTML Object标签：Your browser does not support SVG files,and so your visualization cannot dislpay这显示我的SVG图像文件很好.但是,我想将SVG图像文件移到网站根目录之外,这样没有帐户的用户就无法看到该文件.因此,data属性将成为中间页面的链接,该中间页面将构建SVG图像的路径并将其显示给浏...
05 react img css修改svg图片样式
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
02-13 2284
SVG 意为可缩放矢量图形，SVG 使用 XML 格式定义图像。导入项目的svg图标大概是这样有个path路径，并且有类名，在style中有个fill对应的颜色就是svg的图标颜色这个fill属性，大概的解释是fill 属性设置形状内的颜色。
解决react使用＜img＞时图像不显示问题，内附代码和解释
yilia学习小园
07-18 2413
在react项目开发时，遇到了使用标签时图像不显示的问题，具体表现如下图所示。为父元素div添加宽和高，或者为img元素添加宽和高都不能解决问题。最终发现问题源自项目结构。本项目是使用create-react-app创建的，其中存在public文件目录，index.html文件入口就在该目录中，因此当把图片等静态文件放到此目录中时，可以采用上面所写的代码直接读取到对应的文件。
【React】如何在React中通过svg字符串加载图片
weixin_44204511的博客
09-18 739
在React中，对于本地的svg图像文件可以直接引用,然后在img标签中使用，就可以成功渲染。但最近在项目中通过api获取到了svg字符串，需要渲染到页面上，直接像上面那样引用是失败的。
使用 webpack 开发 React 组件库
mjzhang1993的博客
01-31 5713
使用 Webpack 开发 React 组件库 组件库设计要求 使用 webpack 做模块开发以及打包 打包后的格式为 umd 模块 Code Splitting 代码分割 第三方包排除打包 react、antd 、lodash 等 样式文件抽离 借助 babel-plugin-import 实现组件的按需引入 主要文件结构 ├── package.json ├── script # 一些脚...
react 中, 本地 svg 静态文件，可以像引入字体图标一样自由的设置图标颜色？
最新发布
web相关
04-11 1374
svg：利用 currentColor 的继承父级颜色的特性，加载 svg xml 到 dom 中，从而达到颜色跟随 css 样式进行转换
img引入svg图片路径不显示解决办法
tomrsun的博客
10-29 8715
其实如果是真的svg图片是可以显示的，当我把svg放在vscode里出现的是这样的 可以看到，其实是用的image这个标签引入的png的base64，所以本质上还是png图片，当然也可以引入其他格式的图片，所以此时的svg并不是矢量图，在html里直接写上上面的svg代码，就可以显示。但是因为不是矢量图，所以放大依然会失真，svg的意义就没有了。 ...
react开发笔记(一)：渲染验证码图片报错data:image/svg+xml；base64,undefined net::ERR_INVALID_URL
summer_gf的博客
11-19 1781
刚进入页面的时候img的src会报错data:image/svg+xml;base64,undefined net::ERR_INVALID_URL，解决办法就是在请求返回的时候拼接好src再赋值到img。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值