如何将next-optimized-images与next.js basePath配置一起使用

问题描述

我正在使用next-optimized-images来优化SwiperSlides中使用的图像。

我的图像数组：

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","altText": "back view","url": "/images/devices/apple-iphone-11-green-lg-back.png"
    }
];

我的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
    }
]);

我的.env.local：

NEXT_PUBLIC_BASE_PATH=/products/mobile

没有下一张优化图像的我的SwiperSlides-可以正常工作

{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>
))}

带有下一个优化图像的我的SwiperSlide

{deviceImages.map((image,index) => (
    <SwiperSlide key={index + 3}>
        <img src={require(`../../../../../public${image.url}`)} alt={image.altText} loading={index === 0 ? 'eager' : 'lazy'}/>
    </SwiperSlide>
))}

在本地运行良好，但是在生产环境中路径不正确。路径例如：

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

在产品环境中，我需要帮助：

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）