svg 图像未显示在 react.js 上

Posted 2023-03-06

【中文标题】svg 图像未显示在 react.js 上

【英文标题】：svg image not showing on react.js

【发布时间】：2021-03-31 12:40:27

【问题描述】：

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

index.js：

import  Img, ImgWrap  from './InfoElements';

const InfoSection = ( img, alt) => 
     return(
            <>
              <ImgWrap>
                 <Img src=img alt=alt/>
               </ImgWrap>
            </>
           )

export default InfoSection

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

Data.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，但仍然无法正常工作。图片未显示在背景上。

这是图片返回方式：

这是图片文件夹的路径：

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

【参考方案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]。

【讨论】：

在添加默认值时它起作用了.. 第二种方法也很有用，但我不想那样使用。因为我需要使用更多的图像.. 感谢您解决此问题

【参考方案2】：

关注这篇文章https://www.freecodecamp.org/news/unable-to-find-images-based-on-url-in-react/。

将图片文件夹移动到/public 下而不是/src。

在 data.js

中

img: "./images/svg-1.svg"

或者使用你可以使用import，像这样import image1 from "./images/1.jpg