Is there an efficient way to show images based on a route and file name using javascript?
Solution 1:
Iterating over the indicies of a collection and then inserting the indicies into the strings is easy enough...
const route = '/Images/Banner/'
const slides = Array.from(
{ length: 3 }, // 1 to 3
(_, i) => {
const numStr = String(i + 1).padStart(2, '0');
return {
name: `banner-${numStr}`,
url: `${route}banner-${numStr}`,
};
}
);
console.log(slides);Solution 2:
@CertainPerformance's answer is fine but it relies on Array.from which not all browsers support. Just putting my way of doing this out there
const route = "/Images/Banner/";
const slides = [];
const totalItems = 100;
for (let index = 0; index < totalItems; index++) {
const banner = `banner-${index.toString().length > 1 ? index : `0${index}`}`;
slides.push({
name: banner,
url: `${route}${banner}.png`,
});
}
console.log(slides);