How do you require images in react and how to configure webpack to achieve the same?
I want to require images like this <img src={require('../some.png')} />
I have seen this pattern in the web. But I don't know how to configure that in webpack.
Here is what I do in CRA (from the official React docs)
import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
Vijay Thirugnanam
Inference Service @ Cerebras
Use the file loader.
{ test: /\.(jpg|png|svg|gif)$/, loader: 'file-loader', options: { name: '[path][name].[ext]' } },