Reactjs 如何在next.js basePath配置中使用next优化图像

我用它来优化我的泳衣中使用的图像

我的图像阵列：

const deviceImages = [
    {
        "size": "lg",
        "type": "front",
        "colourName": "Green",
        "s_code": "S0479969",
        "altText": "front view",
        "url": "/images/devices/apple-iphone-11-green-lg-front.png"
    }, {
        "size": "lg",
        "type": "back",
        "colourName": "Green",
        "s_code": "S0479969",
        "altText": "back view",
        "url": "/images/devices/apple-iphone-11-green-lg-back.png"
    }
];

My next.config.js：

const isProd = process.env.NODE_ENV === 'production'
const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');

module.exports = withPlugins([
    [optimizedImages, {

    }],
    {
        basePath: isProd ? '/products/mobile' : '',
        exportTrailingSlash: true
    }
]);

My.env.local：

NEXT_PUBLIC_BASE_PATH=/products/mobile

我的Swiperslide没有下一个优化的图像-工作如预期

{deviceImages.map((image, index) => (
    <SwiperSlide key={index}>
        <img src={`${IS_PRODUCTION ? process.env.NEXT_PUBLIC_BASE_PATH : ''}${image.url}`} alt={image.altText} loading={index === 0 ? 'eager' : 'lazy'}/>
    </SwiperSlide>
))}

我需要帮助在prod环境中创建以下路径：

www.example.com/products/mobile/_next/static/chunks/images/...

www.example.com/_next/static/chunks/images/...

www.example.com/products/mobile/_next/static/chunks/images/...