CODEWITHSUNDEEP
imagereactjswebpackwebpack-file-loader
Alessander Franca
Alessander Franca

Reputation: 2753

Img is not loading at React component

I am trying to load an image at my component:

import React from 'react';
import style from './Sidebar.scss';

const Sidebar = () => (
  <nav className={style.sidebar}>
    <ul className={style.wrapper}>
      <li className={style.item}>
        <div>
          <img className={style.logo} src="../../img/myImg.png" alt="contactto logo" />
        </div>
      </li>
    </ul>
  </nav>
);

export default Sidebar;

But it is not working, I am loading the Roboto font and is working correctly.

Here is my snippet code from webpack.config:

{
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader?name=fonts/[name].[ext]',
      },
      {
        test: /\.(png|svg|jpg)$i/,
        use: {
          loader: 'file-loader?name=img/[name].[ext]',
        },
      },

My img is not copied to my dist folder.

Upvotes: 0

Views: 50

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104359

You need to import that image first:

import Image from '../../img/myImg.png';

Then use this image, like this:

img className = {style.logo} src = {Image} alt = "contactto logo" />

Upvotes: 1

Related Questions