导入的图像未在 React 中显示答案

【问题标题】：Imported image not showing in React导入的图像未在 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：

【问题讨论】：

标签： html css node.js reactjs webpack

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：