CODEWITHSUNDEEP
javascriptreactjsimagenext.js
kirrikirri
kirrikirri

Reputation: 161

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

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?

Upvotes: 0

Views: 924

Answers (1)

Sidharth Panwar
Sidharth Panwar

Reputation: 4654

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.

Upvotes: 1

Related Questions