Почему изображение не отображается в браузере в компоненте Avatar Material-UI?

Question

Я использую компонент Material-UI Avatar React для отображения изображений профиля. При компиляции он может достичь изображения, ошибки во время компиляции нет. Но изображение не отображается в браузере.

Пожалуйста, проверьте это изображение, чтобы лучше понять

Коды :

import {avatar} from '../../images/avatar.png';

<Box component='div'>
     <Avatar src={avatar} alt="Russel Crow"/>
</Box>

Подскажите, пожалуйста, почему изображение не отображается в браузере и как его показать?

Answer 1

Вы использовали именованный импорт, попробуйте вот так:

import avatar from '../../images/avatar.png'

Answer 2

Вы можете попробовать использовать встроенный URL.

Попробуйте запустить вот так

import Avatar from '@material-ui/core/Avatar';

   <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />