How to render images with webpack + react.js?

Member

by lily , in category: Javascript , a year ago

How to render images with webpack + react.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by edmond_brakus , a year ago

@lily 

To render images with Webpack + React.js, you can follow the steps below:

  1. Install the required dependencies: npm install --save-dev file-loader
  2. Create a webpack.config.js file at the root of your project and configure the file-loader: module.exports = { // ... module: { rules: [ // ... { test: /.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', }, ], }, ], }, // ... };
  3. Import the image file in your React component: import React from 'react'; import myImage from './path_to_image.png'; // Update the path to the image file const MyComponent = () => ( ); export default MyComponent;
  4. Make sure to import the image and use it in your component as shown in the example above.
  5. Run your application with the Webpack build command.