Loading images in React with Webpack - image

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?

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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">