Я пытаюсь импортировать файл изображения в один из моих реактивных компонентов. У меня есть настройки проекта с веб-пакетом
Вот мой код для компонента
import Diamond from '../../assets/linux_logo.jpg';
export class ItemCols extends Component {
render(){
return (
<div>
<section className="one-fourth" id="html">
<img src={Diamond} />
</section>
</div>
)
}
}
Здесь моя структура проекта.
Я настроил мой файл webpack.config.js следующим образом
{
test: /\.(jpg|png|svg)$/,
loader: 'url-loader',
options: {
limit: 25000,
},
},
{
test: /\.(jpg|png|svg)$/,
loader: 'file-loader',
options: {
name: '[path][name].[hash].[ext]',
},
},
PS. Я могу получить изображение из любого другого удаленного источника, но не из локально сохраненных изображений. Консоль JavaScript также не дает мне никакой ошибки. Пожалуйста, что-нибудь помогает. Я новичок, чтобы реагировать и не могу понять, что я делаю не так.