react umi中使用svg线上图片不加载问题

这篇具有很好参考价值的文章主要介绍了react umi中使用svg线上图片不加载问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

参考链接: https://www.jianshu.com/p/c927122a6e82
前言:
在react项目中,我们本地通过img标签的src使用svg图片是可以加载的,但是发布到线上图片加载不出来。

import stopImg  from '@/images/stop.svg';
<img src={stopImg  }/>

react umi中使用svg线上图片不加载问题

解决方案

方案一

使用场景:直接在当前页面引入svg图片
有一个 svgr 插件,是支持以 react component 的方式,引入 svg 图片的。
文档链接: https://react-svgr.com/docs/webpack/
react umi中使用svg线上图片不加载问题

import { ReactComponent as StopImg } from '@/images/stop.svg';
<StopImg />
方案二

使用场景:1.直接在当前页面引入svg图片 2.自定义svg图片,svg图片是对象的属性

在 3.9.0 之后,Icon组件我们使用了 SVG 图标替换了原先的 font 图标,从而带来了以下优势:

完全离线化使用,不需要从 CDN 下载字体文件,图标不会因为网络问题呈现方块,也无需字体文件本地部署。
在低端设备上 SVG 有更好的清晰度。
支持多色图标。
对于内建图标的更换可以提供更多 API,而不需要进行样式覆盖。

我们使用ReactComponent 的方式使用svg图片,结合antd的Icon组件来使用。
文档链接:https://ant-design.antgroup.com/components/icon-cn#%E5%85%B3%E4%BA%8E-svg-%E5%9B%BE%E6%A0%87
react umi中使用svg线上图片不加载问题
react umi中使用svg线上图片不加载问题
react umi中使用svg线上图片不加载问题
statusEnum.ts文章来源地址https://www.toymoban.com/news/detail-514854.html

import { ReactComponent as StopImg } from '@/images/stop.svg';
import { ReactComponent as FailImg } from '@/images/fail.svg';

/** 状态 */
export const StatusType = {
  Stoping: { color: '#000000', img: StopImg },
  Fail: { color: '#ffffff', img: FailImg },
};
import Icon from '@ant-design/icons';
import { StatusType } from './statusEnum';

const Info: React.FC<IProps> = (props) => {
const status = props?.status as keyof typeof StatusType ;//对于status数据进行类型定义和StatusType 做关联
	 return (
	 	 <Icon component={StatusType [status]?.img} />
	 )
}

export default Info;

到了这里,关于react umi中使用svg线上图片不加载问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 安卓部分手机使用webview加载链接后白屏(Android低版本会出现的问题)

    大爷:小伙我这手机怎么打开你们呢这个是白屏什么都不显示。 大娘:小伙我这也是打开你们呢这功能,就是一个白屏什么也没有,你们呢的应用不会有病毒吧。 小伙:我的手机也正常; 同事:我的也正常可以显示; 小伙:你们都是什么手机型号; 大爷:我的Android7.1.1

    2024年04月15日
    浏览(44)
  • react图片预加载

    道阻且长,行而不辍,未来可期 图片预加载的原理 :new一个image对象,用这个对象加载图片,等这个对象将这个图片请求完后,再将这个图片放入原本应该放置的位置 代码如下: 骨架屏 图片预加载的时候,可以使用骨架屏做加载效果 使用padding-top:100%给图片的高度做占位

    2024年02月10日
    浏览(36)
  • svg图片构造QGraphicsSvgItem对象耗时很长的问题解决

    目录 1. 问题的提出 2. 问题解决       今天通过一张像素为141 * 214,大小为426KB的svg格式的图片构造 QGraphicsSvgItem 对象,再通过Qt的 Graphics View Framework 框架,将 QGraphicsSvgItem 对象显示到场景视图上,代码如下: 最要命的是程序一起来就需要加载QGraphicsSvgItem对象上百个,那就

    2024年02月19日
    浏览(37)
  • vue3图片懒加载借助插件vue3-lazy react中的图片懒加载 借助插件 react-lazyload

    vue2 就用 vue-lazyload 这个喽 安装 npm install vue3-lazy 在main.ts中配置 在页面中使用 1, 下载安装懒加载模块 2, 在src/assets/目录下放入懒加载占位图 placeholder.gif 3, 在需要使用懒加载的组件中导入懒加载模块和占位图 4, 在组件rander函数中创建占位图片标签img 5, 在组件模板中给需要懒

    2024年02月11日
    浏览(44)
  • vue项目使用svg图片

    (svg-sprite-loader以及vue2-svg-icon的使用) 第一种方式: 1、 安装svg-sprite-loader          npm install svg-sprite-loader --save-dev 2、 webpack 配置(build/webpack.base.conf.js)          3、 创建svg的组件           4、 创建文件夹存放svg的图标,同时注册svg组件到vue里面(index.js) 单

    2023年04月10日
    浏览(32)
  • 解决react,<img>src使用require方法引入图片不显示问题

    解决方法: 再导入的图片后加.default即可 img src={require(\\\'../../images/bg.png\\\').default} alt=\\\"\\\" /   推荐阅读:https://www.cnblogs.com/qianxiaoniantianxin/p/14789826.html

    2024年02月15日
    浏览(44)
  • 微信小程序里面如何使用svg图片

    首先准备一段svg代码如下: 然后按照下面的格式更改 也打开下面的网址转, https://codepen.io/jakob-e/pen/doMoML 将svg代码贴到下图中红线圈起来的位置,会自动转成base64, 然后将base64代码部分复制下来放到浏览器里面打开,可以看到结果. 最后在小程序里面使用,如下 结果:

    2024年02月11日
    浏览(66)
  • react umi/max 页签(react-activation)

    思路:通过react-activation实现页面缓存,通过umi-plugin-keep-alive将react-activation注入umi框架,封装页签组件最后通过路由的wrappers属性引入页面。 浏览本博客之前先看一下我的博客实现的功能是否满足需求,实现功能: - 页面缓存 - 关闭当前页 - 阻止事件传播 - 鼠标右键关闭当前

    2024年01月19日
    浏览(48)
  • React、Umi、RN 整体理解

    可以少去理解一些不必要的概念,而多去思考为什么会有这样的东西,它解决了什么问题,或者它的运行机制是什么? React 是用于构建用户界面的 JavaScript 库 ,起源于 Facebook 的内部项目,该公司对市场上所有 JavaScript MVC 框架都不满意,决定自行开发一套,用于架设 Instagr

    2024年02月05日
    浏览(56)
  • umi 如何使用 proxy 代理解决 开发环境跨域 问题

    由于浏览器的同源策略限制,当一个请求 URL 的协议、域名、端口和当前页面 URL 任意一个不一致时都会出现跨域错误。 eg: 用 node run了一个 http://localhost:8080 的服务,在这个服务器下访问的网页也默认在 http://localhost:8080 这个域下面; 假设服务端所在的域是 http://example.com 这

    2024年02月09日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包