Image rendering in React with webpack broken - html

Question

I am trying to render an image on my React Web App, but the image is broken. However, when I do a console.log of the file's path, I see the following which seems to be correct.
We are using url-loader and file-loader with webpack, and am importing the file path directly in the import statements as required. I have tried adding required ('imageFilePath.png'), but that did not work either.
Currently, the image is placed directly in the src folder along with App.js.
Here is my App.js:
import React, { Component } from 'react'
import './App.css'
import {Tweet} from 'react-twitter-widgets';
import logoFinal from './logoFinal.png';
class App extends Component {
render () {
const { error, isLoaded} = this.state;
if (error){
return <div> Error: {error.message}</div>
} else if (!isLoaded){
return <div>Loading...</div>
} else{
return (
<div className="container">
<nav className="navbar navbar-expand-lg navbar-light fixed-top">
<div className="container">
<a className="navbar-brand pull-left" href="/home">
<div>
<img src={require('./logoFinal.png')} width='100' margintop='-7' /></div></a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
<div className="navbar-nav">
<a className="nav-item nav-link active" href="#">Home <span className="sr-only">(current)</span></a>
<a className="nav-item nav-link" href="#">By State</a>
</div>
</div>
</div>
</nav>
And then in my webpack.config.js I have the following in the module section:
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]
},
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},

Answer 1

Welcome to StackOverflow!
With this line, you have imported the image.
import logoFinal from './logoFinal.png';
The logoFinal variable will be the actual image-path, which will be generated by webpack. So you can use it in the <img /> tag as the src attribute.
<img src={logoFinal} />
You webpack config looks weird, because you have defined two rules for images. The later one with require.resolve('url-loader') seams to be correct.

Answer 2

I'm working with Natalie. I've removed the extra url-loader in the web pack and kept the second. I've tried the suggestions and the image still renders as broken. I see the img in the html as this: http://localhost:3000static/media/logoFinal.fb830421.png
I've also attempted to use file-loader.