1

I have a component in React which displays (or doesn't at the moment) an image within an src tag.

The file path & file name of the image is passed via props after being selected by the user, so I can't do an import at the top of the file. Apparently, I should be able to do something like src={require(file)} but this causes webpack to throw a hissy fit and give the following error: Error: cannot find module "."

As an e.g., a typical filepath/filename I pass to the component is: '../../../images/black.jpg'

This is a stripped-down version of the code in question:

    import React, { Component } from "react";

class DisplayMedia extends Component {
  render() {
    return (
        <div className="imgPreview">
        <img src={this.props.file} alt="piccy" />
        </div>
    );
  }
}

export default DisplayMedia;
Patrick
  • 77
  • 1
  • 3
  • 9
  • The correct URL depends entirely on your setup. I would guess that it will be something like `./images/black.jpg` but it could actually be even something like `assets/black.jpg`. This is not the URL of your source files but of the distribution package generated by webpack. – Sulthan Jan 26 '19 at 12:54
  • Where does `props` come from? Shouldn't it be `this.props`? – Azami Jan 26 '19 at 12:59
  • Yes. Should be 'this.props'. Have amended accordingly. – Patrick Jan 26 '19 at 13:50

2 Answers2

0

Depending on your set up...

If the images are dynamic (during production, images will be added, edited, or deleted): I'd recommend a microservice that only handles images. I go in depth on how to approach such a service: Image returned from REST API always displays broken

If the images are static (during production, the images are bundled within the "bundle.js" file): - I'd recommend importing all of the images within the component, creating an array of the imported images, and then utilizing the array index and React state to cycle through them. For example:

import React, { Component } from "react";
import Image1 from "../images/Image1.png";
import Image2 from "../images/Image2.png";
import Image3 from "../images/Image3.png";

const images = [Image1, Image2, Image3];

export default class ShowImage extends Component {
  state = { index: 0 };

  handleChange = ({ target: { value } }) => {
    this.setState({ index: value });
  };

  render = () => (
    <div className="container">
      <h1>Utilizing Array Indexes</h1>
      <select
        style={{ marginBottom: 20 }}
        value={this.state.index}
        onChange={this.handleChange}
      >
       {images.map((val,idx) => (
         <option key={idx} value={idx}>Image {idx + 1}</option>
       ))}
      </select>
      <img src={images[this.state.index]} />
    </div>
  );
}

While I can't create an exact codesandbox of the above, this working example should give you the basic idea: https://codesandbox.io/s/ovoo077685

Matt Carlotta
  • 18,972
  • 4
  • 39
  • 51
-1

You don't need to add require in src. When relative path is used it will go the images availale in your server but when url is given image will be loaded. You can find more info here

When using src as /images/black.jpg it will convert to localhost:3000/images/black.jpg

Umair Farooq
  • 1,763
  • 13
  • 16