How to pass prop to img src require in React/Next.js

Question

I am currently using React and Next.js and next-images to import images

I want to pass data and directly receive it in my img src url like below:

<img src={require(`../src/image/${data}`)} />

But it seems like the backtick and the template string? don't seem to work in the img tag's option. Is there any way to receive data directly to the src url?

It may easy to find out when you create a sample in stackblitz.com? — Arunkumar Ramasamy
– Arunkumar Ramasamy, Commented Aug 3, 2020 at 8:29

Sidharth Panwar · Accepted Answer · 2020-08-04 09:00:46Z

1

I think what you're looking for is dynamic import statements. Check this link about the import() syntax. For e.g.,

import(`messages_${getLocale()}.js`)

In section 5 (Support for module()) you can check out some ways to make it work for your code.

answered Aug 4, 2020 at 9:00

Sidharth Panwar

4,6646 gold badges31 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

How to pass prop to img src require in React/Next.js

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