无法在屏幕 ReactJS 上显示 SVG 图像答案

【问题标题】：Unable to display SVG image on screen ReactJS无法在屏幕 ReactJS 上显示 SVG 图像
【发布时间】：2021-03-04 20:57:00
【问题描述】：

我正在尝试通过教程学习 react js，并且我创建了一个可重用的组件，可以在其中显示信息，但无法显示我的 svg 图像。看起来像这样-

看看图片不显示，alt 显示出来了。

为此，我制作了三个文件 1)index.js - 渲染 reactJS

const InfoSection = ({
    lightBg,
    imgStart,
    topLine,
    lightText,
    headLine,
    description,
    buttonLabel,
    img,
    alt,
    id,
    darkText,
  }) => {
return (
        <InfoContainer lightBg={lightBg} id={id}>
            <InfoWrapper>
                <InfoRow imgStart={imgStart}>
                    <Column1>
                    <TextWrapper>
                        <TopLine>{topLine}</TopLine>
                        <Heading lightText={lightText}>{headLine}</Heading>
                        <Subtitle darktext={darkText}>{description}</Subtitle>
                        <BtnWrap>
                            <Button to='home'>{buttonLabel}</Button>
                        </BtnWrap>
                    </TextWrapper>
                    </Column1>
                    <Column2>
                        <ImgWrap>
                            <Img src={img} alt={alt} />
                        </ImgWrap>
                    </Column2>
                </InfoRow>
            </InfoWrapper>
        </InfoContainer>
    )
}

InfoElements - 由所有样式组件和 css 组成，与问题有关，ImgWrap 和 Img 是这个，

export const ImgWrap = styled.div`
  max-width: 555px;
  height: 100%;
`;

export const Img = styled.img`
  width: 100%;
  margin-top: 0;
  margin-right: 0;
  margin-left: 10px;
  padding-right: 0;
`;

data.js file- 我正在传递我的数据

export const homeObjOne = {
    id: 'about',
    lightBg: false,
    lightText: true,
    lightTextDesc: true,
    topLine: 'About',
    headLine: 'headline',
    description:
      'description',
    buttonLabel: 'Get Started',
    imgStart: false,
    img: require('../../images/about.svg'),
    alt: 'alt line, if image does not show up',
    dark: false,
    primary: true,
    darkText: false
  };

我尝试了在data 文件中写入这一行的不同方式，

img: require('../../images/about.svg')

这里的路径是正确的，否则 react 会出错。我在这里使用了require，因为这就是我正在关注的教程中的做法。

我做错了什么？如何让图像显示？

【问题讨论】：

您好，Img 组件是如何实现的？
您是否尝试过像这样将导入添加到数据文件的顶部？ import logo from '../../images/about.svg'; 然后将对象中的 img 键设置为 logo
@FarhadKhan 是的，我确实尝试过，它可以工作，但是响应速度不够快，并且没有 Img 和 imgWrap 的 css 属性
看一下 Img 组件。我举了一个与你所拥有的非常相似的例子，它有效stackblitz.com/edit/react-28jji9?file=src%2FApp.js。我使用的是 img，而不是包装组件
@lissettdm 你是对的，它对你有用，但在这里我无法找出问题，因为你将 homeObjOne 与渲染放在同一个文件中，而我刚刚将它们放在两个不同的文件中.我在这里做错了什么？

标签： javascript html css reactjs svg

【解决方案1】：

我正在做同样的练习，我得到了完全相同的错误。

我用不同的方式做，使用import homeObjOneImg from "../../images/svg-3.svg";导入，然后设置img: homeObjOneImg

import homeObjOneImg from "../../images/svg-3.svg";

export const homeObjOne = {
    id: 'about',
    lightBg: true,
    lightText: false,
    lightTextDesc: false,
    topLine: 'topLine',
    headLine: 'headLine',
    description: 'description',
    buttonLabel: 'buttonLabel',
    imgStart: false,
    img: homeObjOneImg,
    alt: 'alt',
    dark: false,
    primary: false,
    darkText: true
}

【讨论】：