Loading images in React with Webpack

Question

I'm having trouble getting a simple image to show up in a simple app using Webpack and React.

I've read this thru and tried a few different ways, but keep getting various errors, or at best sometimes no errors, but also no image displaying.

Here is my React component:

import React from 'react';
import styles from '../css/main.css';

import Menu from './Menu';

const logo = require('./images/PIVX_Planet_1a_239x83.png');

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {test: 'foo'};
  }
  render() {
    return (
      <div>
        <div id='container'></div>

        <div className={styles.logo}>
          <img src={logo}/>
        </div>
        <div>
          <Menu/>
        </div>
      </div>
    );
  }
}

Here is my webpack config:

...
module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        "presets": ["react", "es2015", "stage-0", "react-hmre"]
      }
    }, {
      test: /\.(jpg|png|svg)$/,
      loader: 'url-loader',
      options: {
        limit: 25000,
      },
    }, {
      test: /\.json?$/,
      loader: 'json'
    }, {
      test: /\.css$/,
      loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
    }]
  }
...

With this, get error from webpack in console:

ERROR in ./app/components/App.js Module not found: Error: Cannot resolve 'file' or 'directory' ./images/PIVX_Planet_1a_239x83.png in /Users/mac/_DEV/_LAB/PIVX/PIVX-Planet-2/app/components @ ./app/components/App.js 67:11-56

I've also tried using babel-plugin-transform-react-jsx-img-import (https://www.npmjs.com/package/babel-plugin-transform-react-jsx-img-import)

And then just use:

<div className={styles.logo}>
  <img src="./images/PIVX_Planet_1a_239x83.png"/>
</div>

In that case, there are no errors, but the image show up broken.

I've tried changing the relative path to the image with all these combinations.

Directory structure:

app
- components
  - App.js
- images
  - PIVX_Planet_1a_239x83.png
- index.html ...

Any insights?

Shubham Khatri · Accepted Answer · 2017-04-06 06:03:21Z

3

As per your directory structure the path that you need to use is

const logo = require('../images/PIVX_Planet_1a_239x83.png');

since images is under app directory and not under components from where you are trying to get the image location

Also make sure all your loaders are properly installed

edited Apr 6, 2017 at 6:03

answered Apr 6, 2017 at 5:29

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michael Gaio Over a year ago

that worked! thank you. not sure how that got missed (i had tried it). i also had to install: npm install url-loader

Michael Gaio Over a year ago

i tried. system says i need 15+ reputation to do so (and i only have 10 right now).

Michael Gaio Over a year ago

(i could not vote up yet, but did accept as answer) . thank you

Rizwan · Accepted Answer · 2018-02-08 17:36:19Z

1

you can also try let as:

let logo = require('../images/PIVX_Planet_1a_239x83.png');

Always use let as much as possible to avoid the scope monster

answered Feb 8, 2018 at 17:36

Rizwan

4,5132 gold badges31 silver badges23 bronze badges

Comments

Falieson · Accepted Answer · 2019-02-21 00:07:53Z

0

The problem I was having was using

import logo from './images/PIVX_Planet_1a_239x83.png'

instead of

const logo = require('./images/PIVX_Planet_1a_239x83.png');

in a typescript react app w/ a bespoke webpack config.

answered Feb 21, 2019 at 0:07

Falieson

2,6163 gold badges29 silver badges36 bronze badges

Comments

shony · Accepted Answer · 2021-12-14 17:19:49Z

0

I have tried everything that you guys have suggested but nothing is working for me. when I put my code in and 'run dev' it come out with an error placeholder. I am using it in the app.js and would like my logo as a link to the home page or just show up at all, in this case I was attempting to just have it on the page.

import '../styles/globals.css'
import Link from 'next/link'
import bpdlogofull from '../public/bpdlogofull.png'


    `function MyApp({ Component, pageProps }) {
      return (
        <div>
          <nav className="border-b p-6">
            <img src={bpdlogofull} alt='logo'className='flex justify-end'/>
            <div className="flex mt-4">
              <Link href="/" className="home-button">

answered Dec 14, 2021 at 17:19

shony

1

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Loading images in React with Webpack

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related