React 不渲染 SVG [重复]

Question

您好，我在 React 中创建了一个模板，它使用一个对象来填充它。但是 SVG 没有渲染，我不知道为什么。文件夹和de svg图片的路径都是正确的。

这是对象：

export const homeObjOne = {
    id: 'about',
    lightBg: false,
    lightText: true,
    lightTextDesc: true,
    topLine: 'Gym Application',
    headLine: 'For Our Fitness Lovers',
    description: 'Lorem',
    buttonLabel: 'Get started',
    imgStart: false,
    img: require('../../images/svg-1.svg'),
    alt: 'Growth',
    dark: true,
    primary: true,
    darkText: false
};

这是传递de对象的模板：

const InfoSection = ({
  lightBg,
  id,
  imgStart,
  topLine,
  lightText,
  headline,
  darkText,
  description,
  buttonLabel,
  img,
  alt,
  primary,
  dark,
  dark2
}) => {
  return (
    <Img src={img} alt={alt} />
 );
};

export default InfoSection;

我只写了基本代码，因为它更容易阅读和回答问题。该应用程序没有发送任何有关 htat 路径或 de svg-1.svg 不存在的错误，并且该对象的所有其他组件都渲染得很好，所以我不知道出了什么问题。

如果有人可以帮助我，请告诉我。谢谢！

Answer 1

import imgUrl from '../../images/svg-1.svg';

export const homeObjOne = {
    id: 'about',
    lightBg: false,
    lightText: true,
    lightTextDesc: true,
    topLine: 'Gym Application',
    headLine: 'For Our Fitness Lovers',
    description: 'Lorem',
    buttonLabel: 'Get started',
    imgStart: false,
    img: imgUrl,
    alt: 'Growth',
    dark: true,
    primary: true,
    darkText: false
};

这应该可行。这里可以查看原因：https://create-react-app.dev/docs/adding-images-fonts-and-files/