Can't use require() method that receives a prop in React

Question

As part of a personal project, I have to create an image gallery. For every image (miniature) that is clicked in the gallery, I want the chosen image to appear in a larger size on the page. I have been trying to do this by passing the desired image's address as a prop to my ImageOnView component, like so:

<ImageOnView imgSrc = {this.state.imageLarge}/>

Inside my ImageOnView component, however, I'm having trouble displaying the image using the require() method. Right now it looks like this:

class ImageOnView extends Component {
  render() {
    //This alert displays the image source as expected
    alert(this.props.imgSrc);
    return (
      <img id = "image-large" src = {require(this.props.imgSrc)}/>
    );
  }
}

I get the following error on my webpage: "Error: Cannot find module ".""

How do I go about resolving this issue? Thanks in advance.

why are you using `require()`? Just `src={this.props.imgSrc}` should be enough — imjared, Aug 18 '18 at 02:35
What is the value of `this.state.imageLarge` in the parent component? — Code-Apprentice, Aug 18 '18 at 02:44
External images load just fine, but I have to use require() for local images since I am using Webpack. I found this [here](https://stackoverflow.com/questions/34582405/react-wont-load-local-images) — Rodrigo Veiga, Aug 18 '18 at 02:45
@Code-Apprentice a local image's address, with quotes included, like so: imageLarge: "\"./images/sala-small/04_sl02_SS.jpg\"" — Rodrigo Veiga, Aug 18 '18 at 02:46
@RodrigoVeiga you can try doing `require('' + this.props.imgSrc)` — Suman Kundu, Aug 18 '18 at 02:54
Did you try instead of passing the variable passing a simple string with the image path? I have used this in that way and it works with no issues ... but not as a variable for the path. — Akrion, Aug 18 '18 at 03:00

score 3 · Answer 1 · answered Aug 18 '18 at 02:56

3

Just try

src={require('' + this.props.imgSrc)}

answered Aug 18 '18 at 02:56

Suman Kundu

1,702
15
22

score 0 · Answer 2 · answered Aug 18 '18 at 03:13

Since you are using Webpack as a bundler in runtime, require can't use a variable name like this. It should accept a resolvable path, ie a string here. So, you can require the image in the parent instead of the child and use the resolved path:

class App extends Component {
  state = {
    imageLarge: require( "./somedir/some.jpg" ),
  };

  render() {
    return (
      <div>
        <ImageOnView imgSrc={this.state.imageLarge} />
      </div>
    );
  }
}

class ImageOnView extends React.Component {
  render() {
    // This alert displays the image source as expected
    alert( this.props.imgSrc );
    return (
      <img id="image-large" src={this.props.imgSrc} />
    );
  }
}

score 0 · Answer 3 · answered Jan 26 '22 at 03:19

0

Can also do like this:-

import React from 'react';

function index({title, image, rating}) {
   return <div>
     <img alt="img" src={require("" + image)}></img>
   </div>;
}

export default index;

answered Jan 26 '22 at 03:19

Ajay jangid

711
9
9

score -1 · Answer 4 · answered Aug 18 '18 at 02:48

require() is used to import a module or file. So to get an imageLarge from another file you might want to

const imageLarge = require(path)

or es6 version:

import imageLarge from 'path'

in the img tag you just need to provide a src attribute with imageLarge in component it would look something like:

const imageLarge = require(path) 

<ImageOnView imgSrc = {imageLarge}/>

class ImageOnView extends Component {
  render() {

    return (
      <img id = "image-large" src = {this.props.imgSrc}/>
    );

  }
}

OP explained `require` is needed due to local images and webpack. — Akrion, Aug 18 '18 at 02:51

Can't use require() method that receives a prop in React

4 Answers4