range of numbers with fixed length, sequence names at end of string

Asked Jul 01 '20 at 15:40

Active Jul 01 '20 at 15:40

Viewed 37 times

I'm looking to create an array of image elements and the filenames are all automatically generated as a sequence, like so:

File_00000.png
File_00001.png
File_00002.png
etc...

To generate my array of images, I'm using this:

const images = [...Array(143).keys()].map((image) => {
    return (
        <img
            key={image}
            src={require(`./images/File_0000${image}.png`)}
        />
    )
})

But as it reaches 10, I can't figure out how to generate the filename when it always has 5 trailing numbers, since it's sequential but at the end of the filename.

asked Jul 01 '20 at 15:40

jpea

3,114
3
26
26

`String.prototype.padStart` and `String.prototype.padEnd` are your friends. `n => \`File_${n.toString().padStart(5, '0')}.png\`` – ASDFGerte Jul 01 '20 at 15:43
You need to add zeros to the number: https://stackoverflow.com/questions/1267283/how-can-i-pad-a-value-with-leading-zeros – Vahid Alimohamadi Jul 01 '20 at 15:44
@ASDFGerte - thanks! I can't believe I haven't had to do this yet. – jpea Jul 01 '20 at 15:49

range of numbers with fixed length, sequence names at end of string

0 Answers0