Импортированное изображение не отображается в React

Question

У меня есть компонент, на котором мне нужно показать изображение:

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

Изображение сгенерировано правильно, так как когда я go на URL-адрес, указанный в инспекторе, он появляется в браузере.

But on the webpage only the alt is shown:

введите описание изображения здесь

Answer 1

Вы должны использовать src="" вместо href="".

href используется для указания, где вы хотите разместить ссылку на go, например, в теге.

Answer 2

Измените href на sr c. href используется для тегов привязки, а sr c используется для тегов img

Answer 3

Проблема в том, что вы используете неправильный атрибут в своем теге img, используйте вместо него src:

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