參考鏈接： https://www.jianshu.com/p/c927122a6e82
前言：
在react項(xiàng)目中，我們本地通過(guò)img標(biāo)簽的src使用svg圖片是可以加載的，但是發(fā)布到線上圖片加載不出來(lái)。
import stopImg from '@/images/stop.svg';
<img src={stopImg }/>
解決方案
方案一
使用場(chǎng)景：直接在當(dāng)前頁(yè)面引入svg圖片
有一個(gè) svgr 插件，是支持以 react component 的方式，引入 svg 圖片的。
文檔鏈接： https://react-svgr.com/docs/webpack/
import { ReactComponent as StopImg } from '@/images/stop.svg';
<StopImg />
方案二
使用場(chǎng)景：1.直接在當(dāng)前頁(yè)面引入svg圖片 2.自定義svg圖片，svg圖片是對(duì)象的屬性
在 3.9.0 之后，Icon組件我們使用了 SVG 圖標(biāo)替換了原先的 font 圖標(biāo)，從而帶來(lái)了以下優(yōu)勢(shì)：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-514854.html
完全離線化使用，不需要從 CDN 下載字體文件，圖標(biāo)不會(huì)因?yàn)榫W(wǎng)絡(luò)問(wèn)題呈現(xiàn)方塊，也無(wú)需字體文件本地部署。
在低端設(shè)備上 SVG 有更好的清晰度。
支持多色圖標(biāo)。
對(duì)于內(nèi)建圖標(biāo)的更換可以提供更多 API，而不需要進(jìn)行樣式覆蓋。
我們使用ReactComponent 的方式使用svg圖片，結(jié)合antd的Icon組件來(lái)使用。
文檔鏈接：https://ant-design.antgroup.com/components/icon-cn#%E5%85%B3%E4%BA%8E-svg-%E5%9B%BE%E6%A0%87
statusEnum.ts文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-514854.html
import { ReactComponent as StopImg } from '@/images/stop.svg';
import { ReactComponent as FailImg } from '@/images/fail.svg';
/** 狀態(tài) */
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 ;//對(duì)于status數(shù)據(jù)進(jìn)行類型定義和StatusType 做關(guān)聯(lián)
return (
<Icon component={StatusType [status]?.img} />
)
}
export default Info;
到了這里，關(guān)于react umi中使用svg線上圖片不加載問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
