0

I've been looking around for this for houres, and can't find a solution that works.

I'm trying to add a local uri to and img element, but it it can't resolve it. 

import React from 'react'
import image from '../assets/udemy2.PNG'
const WorkingSpinner = () => (
<div>
  <img height="50px" width="50px" src={image}/>
</div>
)

export default WorkingSpinner

I'm trying to use the file-loader with webpack and my config looks like this:

  module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    }, {
    loader: 'file-loader',
    test: /\.(png|jpe?g|gif)$/i,
    options: {
      name: '[name].[ext]',
      outputPath: "images"
    }
    }, {
    loader: 'url-loader?limit=8192',
    test: /\.(png|jpe?g|gif)$/i,

    }]

I simply don't know why it does not work, according to the docs and different turtorials I've watched I'm doing things according to the solution. Still, all I get is an empty image when I'm trying to render my component.

Dmitry Shvedov
  • 3,169
  • 4
  • 39
  • 51
tsol_stack
  • 11
  • 3

2 Answers2

1

Ok, so it seems the solution was simpler than adding loaders and plugins. Turns out i could simply put my images in a folder in my public directory where thebundle is being outputted and use an absolute path to the that image i wanna use.

so worked.

My dir structure look like this:

enter image description here

Hope this helps anyone else having similar issues.

tsol_stack
  • 11
  • 3
0

I am not sure if it's the best way, but in my application I am using copy-webpack-plugin for this (https://github.com/webpack-contrib/copy-webpack-plugin):

 plugins: [
    ... someOtherPlugins,
    new CopyWebpackPlugin([{from: 'images/*.*'}])
]

And then from React component I call

<img height="50px" width="50px" src={'/images/image.jpeg'}/>

Alonas
  • 453
  • 4
  • 12
  • Thanks for your tip. Unfortunately it didn't do any difference. I'm still just getting an empty image element. Before i installed the loaders i was getting an error about having to use a proper loader for the file, so i know the loaders handled something, but the end result is still just an empty image. It does create a new folder in my dist-directory with whe image files, but it is not displaying them in the img-elemtn. I'm getting a 404 in the network request tab Does anyone know if there is any known new thing you have to do to get React to use local images/files with webpack? – tsol_stack Jan 29 '20 at 17:08