picture component always using default sizes
Describe the bug When using the picture component, if we set custom deviceSizes, the sizes used in the <source> tag are still the default sizes.
To Reproduce Add custom deviceSizes in next.config.js
const withExportImages = require('next-export-optimize-images');
module.exports = withExportImages({
output: 'export',
images: {
deviceSizes: [300, 430, 600, 768, 1024, 1536, 2048, 2560],
imageSizes: [],
}
})
Use the picture component
import Picture from "next-export-optimize-images/picture";
import test from "@public/images/test3.jpg";
const Home = () => {
return (
<div>
<Picture src={test} alt="test" sizes="100vw" />
</div>
);
}
export default Home
The result is the following
<picture>
<source
srcset="/_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_640.webp 640w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_750.webp 750w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_828.webp 828w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1080.webp 1080w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1200.webp 1200w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1920.webp 1920w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2048.webp 2048w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_3840.webp 3840w"
type="image/webp" width="7441" height="4961" sizes="100vw">
<img alt="test" loading="lazy" width="7441"
height="4961" decoding="async" data-nimg="1" style="color:transparent" sizes="100vw"
srcset="/_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_300.jpg 300w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_430.jpg 430w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_600.jpg 600w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_768.jpg 768w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1024.jpg 1024w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1536.jpg 1536w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2048.jpg 2048w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2560.jpg 2560w"
src="/_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2560.jpg">
</picture>
In the srcset of the <source> tag, the following sizes are used [640, 750, 828, 1080, 1200, 1920, 2048, 3840] instead of [300, 430, 600, 768, 1024, 1536, 2048, 2560] as set in next.config.js. And the image files are only generated with the following sizes [300, 430, 600, 768, 1024, 1536, 2048, 2560] so it causes a 404 error.
Expected behavior
<picture>
<source
srcset="/_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_300.webp 300w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_430.webp 430w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_600.webp 600w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_768.webp 768w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1024.webp 1024w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1536.webp 1536w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2048.webp 2048w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2560.webp 2560w"
type="image/webp" width="7441" height="4961" sizes="100vw">
<img alt="test" loading="lazy" width="7441"
height="4961" decoding="async" data-nimg="1" style="color:transparent" sizes="100vw"
srcset="/_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_300.jpg 300w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_430.jpg 430w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_600.jpg 600w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_768.jpg 768w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1024.jpg 1024w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_1536.jpg 1536w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2048.jpg 2048w, /_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2560.jpg 2560w"
src="/_next/static/chunks/images/_next/static/media/test3.d0fd0ba6_2560.jpg">
</picture>
Thank you for the library !
As far as I've checked, it doesn't seem to be reproducible. Can you provide a simple reproduction code?