Import image using this.props.src in React

Question

I am giving my component 2 props src and alt so that it could display an image like so:

<img src={require(this.props.src)} alt={this.props.alt} />

Running my app gives me this error

Error: Cannot find module "."

I tried the image URL and it is correct and works, the app just doesn't want to work when I supply require the props.

Why do you need require? Can't you just have src={this.props.src} ? — Dario
– Dario, Commented Aug 6, 2017 at 20:12
You shouldn't require files like this in runtime. Give it an absolute path from the destination folder. — Win
– Win, Commented Aug 6, 2017 at 20:25

Rodrigo · Accepted Answer · 2017-08-06 23:48:37Z

2

If you're using webpack, I'm going to assume that you're using the webpack image loader. If that's the case it means that you're importing your images in your component, probably using named imports. In that case you can pass the named import as a prop to either a child component or use it directly on the component where the import lives.

// named import
import landscape from "./img/landscape.jpg";
// child component
import Child from "./components/child";

const Parent = () => 
  <div>
    <Child src={landscape} />
  </div>;


// then the child component could look like this
const Child = (props) => 
  <div>
    <img src={props.src} />
  </div>;

If this is not the case, please give more information regarding how webpack is handling the images in your components.

answered Aug 6, 2017 at 23:48

Rodrigo

1,7261 gold badge16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Import image using this.props.src in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related