0

New react developer, i'm using webpack and trying to load image, but it wont show it and it is not giving me any error, any idea ?

webpack: 

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        loader: 'url-loader?limit=100000',
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
  },
};

import Immage from '../../icons/MicrosoftTeamsImage.png';


          <img src={require('../../icons/MicrosoftTeamsImage.png')} alt="icon" />


also tried like this:

<img src={Immage} alt="some example image" alt="icon" />

it shows like this:

enter image description here

those i installed like this: yarn add --save file-loader url-loader

edit: I checked network tab and status is 200, but it shows Request URL: http://..../[object%20Module] i tried to fix it like this <img src={require('../../icons/MicrosoftTeamsImage.png').default} alt="icon" /> and now it says : Request URL: http://..../29691089ca26d06beb2854d687a560cf.png but still image wont show

walee
  • 575
  • 4
  • 16
  • any help is appreciated ! – walee Mar 09 '22 at 21:27
  • What does dev tools say? 404? Is it trying to load from the right URL? – Mike 'Pomax' Kamermans Mar 09 '22 at 21:29
  • 1
    (on a different note, no currently supported browsers need fonts in formats that aren't woff2 or woff, definitely worth removing eot, ttf. Those are _not_ meant to be used online anymore. One's a dead format, the other is superfluous because every browser that supports ttf also supports the far smaller woff/woff2 formats) – Mike 'Pomax' Kamermans Mar 09 '22 at 21:30
  • @Mike'Pomax'Kamermans there is nothing in console, no errors... – walee Mar 09 '22 at 21:31
  • @Mike'Pomax'Kamermans i did according to this: https://stackoverflow.com/a/46640129/17292277 – walee Mar 09 '22 at 21:32
  • @Mike'Pomax'Kamermans should there also be loader: "file-loader", ? – walee Mar 09 '22 at 22:02
  • @walee the ONLY way that console wouldn't be showing some error (like 404 or other http error while loading an image) is that this image simply looks like this – Flash Thunder Mar 09 '22 at 23:14
  • @FlashThunder no when i open it in visual studio it is big image – walee Mar 09 '22 at 23:16
  • If the image doesn't load, the console tab will show errors, and the network tab will show requests with a status that isn't 200. Make sure both console and network tabs are not set to any particular filter, so they show _all_ errors. Also, do an "inspect element" on your image, and copy its outerhtml, then put that in your post so that people can see what real DOM your react code turns into. – Mike 'Pomax' Kamermans Mar 10 '22 at 15:43
  • @Mike'Pomax'Kamermans i checked network tab and status is 200, but it shows Request URL: http://..../[object%20Module] i tried to fix it like this icon and now it says : Request URL: http://..../29691089ca26d06beb2854d687a560cf.png but still image wont show – walee Mar 10 '22 at 20:15
  • Don't tell me in a comment, tell everyone by working those missing details [into your post](/help/how-to-ask). People asking for details are not asking for themselves, they're trying to get you to improve your question so that _everyone_ can help answer it =) – Mike 'Pomax' Kamermans Mar 10 '22 at 20:41

1 Answers1

0

Take the directory icons that contains the image and put it inside the src directory.

Then adjust the path of the image to be as:

import Immage from '../icons/MicrosoftTeamsImage.png';

And then use this syntax:

<img src={Immage} alt="some example image" alt="icon" />
Omar Osman
  • 44
  • 3