javascript - Unable to load images from local library in React.js

Question

I have written a code for my website and unfortunately, i am not able to load images that are located in my local library. I have moved my images folder inside 'src' folder, but the image doesn't load at all.

Here is the code for my component called 'Landscape' which I am trying to load.

Code:

import React, {Component} from 'react';
import {Grid, Button, Row, Col, Thumbnail} from 'react-bootstrap';
import 'react-bootstrap-carousel';
import './Landscape.css';

export default class Landscape extends Component{
render(){
return(
<div className="thumbnails">
  <Grid>
    <Row>
      <Col xs={6} md={4}>
        <Thumbnail src=".Pictures/1.jpg" alt="242x240">
        <h3>Elephant</h3>
        <p>zoo</p>
        <p>
          <Button bsStyle="primary">Like</Button>
          {' '}
          <Button bsStyle="primary">Dislike</Button>
        </p>
        </Thumbnail>
      </Col>
    </Row>
  </Grid>
</div>

);
}}

Answer 1

If you have a few images you can just import it directly in your component

import logo from './Pictures/1.jpg';

Then call it

<img src={logo} alt="logo" width={"240"} height={"240"}  />

if you have hundreds of images because you can’t use import paths, you have to create a images folder in the public folder and use this code.

 //This is the regular way.

  <img src={process.env.PUBLIC_URL + 'images/profile.svg'} width={"200"} height={"200"} className="profile-img" alt="profile" />

Another way you can specify each component has a images.js file, then import all the images that retarded of that component in images.js and name it as the related component name

images.js

import logo from './images/logo.svg';
import cover from './images/cover.svg';
import profile from './images/profile.svg';
import background1 from './images/body.svg';
export default {
    logo,
    cover,
    profile,
    background1
}

Then in your component you can just import images.js file:

import images from './images';

Then call any img you want:

      <img src={images.logo} className="App-logo" alt="logo" />
      <img src={images.cover} className="App-logo" alt="logo" />
      <img src={images.profile} className="App-logo" alt="logo" />
      <img src={images.background1} className="App-logo" alt="logo" />