CODEWITHSUNDEEP
javascriptreactjswebpack
cl0r1
cl0r1

Reputation: 65

react app doesn't read correct path for assets folder - local images don't show up on localhost, only shows an image icon

My directory looks like this:

-PROJECT
   - app
     -assets
      -image1.png
      -image2.jpg
      -image3.png
     -components
     -reducers
   -node_modules (on .gitignore)
   -public
     -bundle.js
     -bundle.js.map
     -favicon.ico
     -index.html
     -style.css
   -server
   .babelrc
   .gitignore
   webpack.config.js

Now, my webpack.config.js looks like this:

'use strict';

const { resolve } = require('path');

module.exports = {
  entry: ['babel-polyfill', './app/main'],
  output: {
    path: __dirname,
    filename: './public/bundle.js',
  },
  mode: 'development',
  context: __dirname,
  devtool: 'source-map',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /jsx?$/,
        include: resolve(__dirname, './app'),
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [{ loader: 'file-loader', options: {} }],
      },
    ],
  },
};

And my Home.js component:

import React, { Component } from 'react';
import logo from '../assets/image2.jpg';

class Home extends Component {
  render() {
    return (
      <div className="home">
        <h1>name</h1>
        <p>something</p>
        <img id="imgHome" src={logo} />
      </div>
    );
  }
}

*If I use an image address from a browser it works fine, but I'm trying to use local images and doesn't show anything. I also tried moving the images into the public folder and also tried to use require('') syntax. src={require('../assets/image2.jpg')} doesn't work either. *Also I noticed that the path has been read because when I run the server it shows a get .jpg.

pYYj <—— 200 OK 1.79 MB application/javascript; charset=UTF-8 (<—> 145.5 ms)
UO13 ——> GET /aba2c31a13e0d6336220931199bf46c3.jpg 
UO13 <—— 200 OK 231 B text/html; charset=UTF-8 (<—> 1.7 ms)
HkSa ——> GET /favicon.ico 
HkSa <—— 200 OK 6.24 KB image/x-icon (<—> 1.6 ms)
6tQo ——> GET / 
6tQo <—— 304 Not Modified (<—> 1.7 ms)
fOce ——> GET /style.css 
fOce <—— 304 Not Modified (<—> 1.5 ms)
cWVD ——> GET /bundle.js 
cWVD <—— 304 Not Modified (<—> 2.2 ms)

Hope someone can help me!

Upvotes: 4

Views: 13058

Answers (2)

Alex Yepes
Alex Yepes

Reputation: 1195

What you can try: move the assets folder inside the public folder. Then from the img tag reference the images like: src=''. /assets/image1.png'' I hope it works

Upvotes: 4

i.brod
i.brod

Reputation: 4633

Why are you importing the image? Try using it as a url , in your element: 

<img id="imgHome" src="assets/image2.jpg">

Move the assets folder to the public one, and this should work

Upvotes: 4

Related Questions