Тест

/* Json */
{
    "images": [
        {
            "id": 1,
            "name": "imageMainAuto",
            "urlPng": "main-auto.png",
            "urlWebp": "main-auto.webp",
            "urlMobWebp": "main-auto-mob.webp",
            "urlMobPng": "main-auto-mob.png"
        },

        {
            "id": 2,
            "name": "imageMainBg",
            "urlPng": "main-bg.png",
            "urlWebp": "main-bg.webp",
            "urlMobWebp": "main-bg-mob.webp",
            "urlMobPng": "main-bg-mob.png"
        },

        {
            "id": 3,
            "name": "imageVariant",
            "urlPng": "small-1.png",
            "urlWebp": "small-1.webp",
            "urlMobWebp": "small-1-mob.webp",
            "urlMobPng": "small-1-mob.png"
        }
    ],

    "icons": [
        {
            "id": 1,
            "path": "../../images/sprite.svg",
            "iconId": "arr-r"
        }
    ]
}

/* JS */

import jsonImages from "../../data/Data.json";
import React from 'react';

const Banner = () => {

    const imageArr = jsonImages.images;

    return (
<section className="first-screen">
        for (let image of imageArr) {
            <picture className="first-screen__bg-pic" key={image.id}>
                <source media="(min-width: 415px)" srcSet={require(`../../images/${image.urlPng}`).default} type="image/png"/>
                <source media="(min-width: 415px)" srcSet={require(`../../images/${image.urlWebp}`).default} type="image/webp"/>
                <source media="(max-width: 414px)" srcSet={require(`../../images/${image.urlMobPng}`).default} type="image/png"/>
                <source media="(max-width: 414px)" srcSet={require(`../../images/${image.urlMobWebp}`).default} type="image/webp"/>
                <img src={require(`../../images/${image.urlPng}`).default} alt="Background"/>
            </picture>
        }
</section>
    )
}