CODEWITHSUNDEEP
reactjs
Thomas Martinez
Thomas Martinez

Reputation: 1711

Reactjs local image not loading

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;

Upvotes: 1

Views: 4004

Answers (1)

webdeb
webdeb

Reputation: 13211

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

Upvotes: 2

Related Questions