导入的图像未在 React 中显示

Posted 2023-02-22

【中文标题】导入的图像未在 React 中显示

【英文标题】：Imported image not showing in React

【发布时间】：2020-10-31 23:37:59

【问题描述】：

我有一个组件需要在其上显示图像：

import React from 'react'
import background from '../media/content-background.jpg'

function ContentPage()
    return(
        <div id="content-page">
            <div id="content-header">
                <img href=background alt='back'/>
            </div>
            <div id="content-body">

            </div>
        </div>
    )


export default ContentPage

当我转到检查器中指定的 url 时，图像会正确生成，它会显示在浏览器中。

但在网页上只显示 alt：

【参考方案1】：

您应该使用src="" 而不是href=""。

href 用于指定链接的位置，例如在标签中。

【参考方案2】：

问题是您在img 标签中使用了错误的属性，请改用src：

<img src=background alt='back'/>

【参考方案3】：

将 href 更改为 src。 href用于锚标签，src用于img标签