React 不显示图像或 svg 文件答案

【问题标题】：React doesn't show images or svg filesReact 不显示图像或 svg 文件
【发布时间】：2021-05-16 16:37:56
【问题描述】：

我的问题是 react 不显示任何图像（jpeg、png）或 svg 文件。我一直在尝试一些不同的技术，例如在图像的 src 属性中进行简单导入，或者使用require()。但我无法解决问题，我也尝试在不同文件夹之间移动图像，但这也不起作用。我正在使用 react 和 styled-components，这是我的一些代码：

<Img src={require('../../images/cuervo.png')} alt={alt}></Img>

创建新组件：

import React from 'react'
import { Icon } from '@material-ui/core'

const mainLogo = require("./logo.svg")
const Logo = () => {
    return (
        <Icon>
            <img src={ mainLogo } height={25} width = {25}>
            </img>
        </Icon>
    )
}

export default Logo

导入也不起作用。

【问题讨论】：

嗨，马克，你能补充一点上下文吗？例如，如果您尝试在浏览器中执行“检查元素”，它会在控制台上显示错误吗？ HTML代码中图片的src属性是什么？
检查显示为：<img src="[object Module]" height="25" width="25">。试图给他们更多的背景。该图像是一个 SVG 文件，我想在导航栏中显示 svg。在控制台中只显示两个关于 img alt 属性的警告，另一个是关于从未使用过的组件

标签： javascript node.js reactjs svg

【解决方案1】：

也许尝试用一个图形标签替换图标标签，如下所示，如果可行，请告诉我。可能是图标标签很烦人。

import React from 'react'
import mainLogo from 'location/of/your/image'

const Logo = () => {
    return (
        <figure>
            <img src={ mainLogo } alt="Logo" />
        </figure>
    )
}

export default Logo

另外，我确定您将 Logo 组件正确导入到您希望显示此 Logo 的主组件中，但可能会仔细检查它是否被正确导入:)

【讨论】：

我认为导入不是问题，我的 svg 文件在同一个文件夹中，当应用程序运行时，它在谷歌浏览器的检查部分显示为 <figure><img src="[object Module]" alt="Logo"></figure>跨度>