svg 图像未显示在react.js 上

Question

我一直在关注 YouTube 教程，使用 React.js 制作网站。

索引.js：

import { Img, ImgWrap } from './InfoElements';

const InfoSection = ({ img, alt)} => {
     return(
            <>
              <ImgWrap>
                 <Img src={img} alt={alt}/>
               </ImgWrap>
            </>
           )
}
export default InfoSection

我一直在从另一个名为 Data.js 的文件夹导出图像 src

数据.js：

export const homeObjOne = {
   img: require("../../images/svg-1.svg"),
   alt: 'error404'
}

我使用 styled-components 来设置样式

InfoElements.js：

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

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

这里图像被放置在

src->图像->svg-1.svg

我尝试使用 jpe、jpg 和 png 等其他图像而不是 svg，但它仍然不起作用。图像未显示在背景上。

这是图像返回方式的图片：

这是图像文件夹的路径：

我已经尝试过所有其他图像格式，结果是相同的。我做错了什么吗？

Answer 1

您的结构正在成为默认导出命名问题的受害者。当您在 Data.js 中需要图像时，您将其设置为模块。如果要访问图片的URL，需要使用：

export const homeObjOne = {
   img: require("../../images/svg-1.svg").default, //note the default part at the end
   alt: 'error404'
}

尽管使用导入可以使这变得更干净：

import homeObjOne from "../../images/svg-1.svg";

export const homeObjOne = {
   img: homeObjOne, //no need for default here, thanks to import
   alt: 'error404'
}

注意：如果您在图像损坏时检查图像，您将看到 src 将为[object Object].