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, Jun 18 '17 at 00:35
I'm trying to import an image from my assets / images folder — Thomas Martinez, Jun 18 '17 at 00:37
I'm just trying to load my images locally from this folder. I'm trying to build my own static website — Thomas Martinez, Jun 18 '17 at 00:39

webdeb · Accepted Answer · 2017-06-18T00:51:22.140

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 '17 at 00:51

answered Jun 18 '17 at 00:41

webdeb

12,993
5
28
44

That was it! Thanks...so quick question why couldn't I use an image folder in my src folder? – Thomas Martinez Jun 18 '17 at 00:45
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. – webdeb Jun 18 '17 at 00:47
Sweet! Thanks for the help! – Thomas Martinez Jun 18 '17 at 00:49

Reactjs local image not loading

1 Answers1

Linked