时间戳

首页 > 解决方案 > svg 图像未显示在 react.js 上

css - svg 图像未显示在 react.js 上

问题描述

我一直在关注使用 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

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

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

在此处输入图像描述

这是图像文件夹的路径：

在此处输入图像描述

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

标签： cssreactjssvgstyled-components

解决方案

您的结构正在成为默认导出命名问题的受害者。当您在 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].

推荐阅读