为什么在React中使用SVG导入时会导入错误的图像？

Question

我试图将一个SVG文件作为React组件导入。在我正在处理的其他文件中，这样做很好用。但是在我遇到问题的那个文件中，显示的不是正确的图片，而是另一张图片。

import React from 'react';
import './news-detail.style.css';
import Header from '../header/header.component';
import {useNavigate} from "react-router-dom";
import CustomButton from '../custom-button/custom-button.component';
import { ReactComponent as Img } from './newsdetail.svg';


const NewsDetail = props => {
    const navigate = useNavigate();
    return <div className='news-detail'>
        <Header/>
        <h1 className="pageheadline">News</h1>
        <CustomButton onClick={() => navigate(-1)}>Back</CustomButton>  
        <Img className="headerimg"/>
        </div>;
};


export default NewsDetail;

这是我的代码。newsdetail.svg没有显示出来，取而代之的是从我的Header组件中显示的图像。

提前感谢。

- Anne

---

你有检查过开发者工具吗？你的元素在DOM树中可见吗？可能是CSS的问题，你打错了：className="headering"。 - Dennis Vash

Answer 1

检查SVG文件中存在的id、class或style属性，并验证其他SVG文件是否使用相同的id、class或style。如果是这样，那就是加载不同图像的原因。

在每个SVG中使用不同的变量将解决此问题。确保在更新变量时，更新该SVG文件中该变量的所有出现。

- Anand Prem