Reactjs local image not loading

Question

I'm having an issue loading an image locally in my reactjs file. Any help would be awesome. Thanks

Failed to compile ./src/components/pages/home.js

Module not found: Can't resolve '../Assets/images/Thomas-overlay3.jpg' in 'C:\Users\tcmar\Documents\ThomasWebsite\mywebsite\src\components\pages'

This error occurred during the build time and cannot be dismissed.

my code:

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <div className="container">
        <div className="hero-image">
          <img src={require('/src/Assets/images/Thomas-overlay3.jpg')} alt="hero-image" />
        </div>
        <div className="hero-text">
          Hello, My Name is <span>Thomas</span>
        </div>
      </div>
    );
  }
}

export default Home;

Are you trying to import image from 'some-image.jpg' ? Could you paste your code? — webdeb
– webdeb, Commented Jun 18, 2017 at 0:35
I'm trying to import an image from my assets / images folder — Thomas Martinez
– Thomas Martinez, Commented Jun 18, 2017 at 0:37
I'm just trying to load my images locally from this folder. I'm trying to build my own static website — Thomas Martinez
– Thomas Martinez, Commented Jun 18, 2017 at 0:39

webdeb · Accepted Answer · 2017-06-18 00:51:22Z

2

Your assets should go in some public/ folder which is served as is by the server.

Then you can just refer the actual resource:

...
<img src="/assets/my-image.jpg" />
...

Or, you can use webpacks file-loader and load it like:

<img src={require("file-loader!./file.png")} />

However, this will load the file and emit a copy in the public folder automatically, if this is what you want.

more info: https://github.com/webpack-contrib/file-loader

edited Jun 18, 2017 at 0:51

answered Jun 18, 2017 at 0:41

webdeb

13.3k5 gold badges32 silver badges44 bronze badges

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

3 Comments

Thomas Martinez Over a year ago

That was it! Thanks...so quick question why couldn't I use an image folder in my src folder?

webdeb Over a year ago

because you src folder is not public, check out my edits, you can load it from src with the file-loader which will create the public file and return the correct path.

Thomas Martinez Over a year ago

Sweet! Thanks for the help!

Collectives™ on Stack Overflow

Reactjs local image not loading

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related