时间戳

首页 > 解决方案 > 在 React 应用程序中显示 SVG 时出现问题

javascript - 在 React 应用程序中显示 SVG 时出现问题

问题描述

我一直在尝试在我的 React 应用程序中添加与 js 文件相同的文件夹中的 SVG 文件但是它显示无图像默认图像。我正在使用 1.6.9 反应应用程序

我尝试拖放 SVG 文件的内容，并尝试在线查找解决方案，但没有成功。

<img src={"dot.svg"}/>
<img src={"./dot.svg"}/>
<smg src="./dot.svg">

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg 
PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" 
height="100%" viewBox="0 0 800 600" version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" 
xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip- 
rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke- 
miterlimit:1.5;"><ellipse cx="400" cy="300" rx="26.434" ry="25.114" 
style="fill:#00017f;stroke:#000;stroke-width:1px;"/></svg>

我想在我的 React 应用程序上显示 SVG 文件。

标签： javascripthtmlcssreactjssvg

解决方案

你需要这样做，

<img src={require("./dot.svg")}/>

或者

更准确地说，

import dot from './dot.svg';

<img src={dot} />

推荐阅读