带有导入图像的模板文字

Question

<img alt="placeholder" src={ALL.file1.default}></img>

The above works and renders a picture.

I'm trying to use template literals to make the 1 a dynamic variable.

<img alt="placeholder" src={`${ALL.file`${randomnum}`.default}`}></img>
<img alt="placeholder" src={ALL.file`${randomnum}`.default}></img>

Both these don't seem to work as I get an error

Attempted import error: 'file' is not exported from '../images/icons/' (imported as 'ALL').

I imported all the pictures using a index.js in the images folders exporting all of them individually then importing them with:

import * as ALL from "../images/icons/";

         

Am I using the template literal incorrectly, or does it have something to do with the import conflicting method?

Any help would be appreciated.

Thanks in advance.

Answer 1

Remember when you use dynamic properties you need to use the [] syntax.

In your example, it would go like this:

<img alt="placeholder" src={ALL[`file${randomnum}`].default}></img>