رفع خطای link rel=preload has an invalid imagesrcset value در nextjs

مشکل "link rel=preload has an invalid imagesrcset value" در Next.js معمولاً زمانی رخ می دهد که از next/image برای مدیریت تصاویر استفاده می‌کنید و مرورگر نمی‌تواند مقادیر imagesrcset را که توسط Next.js ایجاد شده‌اند، تشخیص دهد یا بخواند. این مشکل اغلب به پیکربندی نامناسب next.config.js، مسیرهای تصاویر یا نحوه‌ استفاده از کامپوننت <Image> مربوط می‌شود. در این آموزش به راهکار های رفع مشکل مذکور اشاره شده است.

- بررسی next.config.js و تنظیمات image domains:

اطمینان حاصل کنید دامنه‌هایی که تصاویر از آنها لود می‌شوند، در فایل تنظیمات next js به نام next.config.js، تعریف شده باشند:

module.exports = {

images: {

domains: ['example.com'], // دامنه‌های معتبر

};

مطابق با تصویر زیر پس از انجام تغییرات می بایست با ورود به بخش Setup Node.js App، اپلیکیشن را برای اعمال تنظیمات، ریستارت نمایید:

تصویر(1)

- استفاده صحیح از <Image>:

هنگام استفاده از کامپوننت next/image، حتماً از مقادیر مناسب استفاده کنید:

مقدار src باید یک URL معتبر یا مسیر فایل معتبر باشد.
از width و height یا "layout="fill استفاده کنید.

نمونه صحیح به صورت زیر است:

import Image from 'next/image';

export default function MyImage() {

return (

<Image

src="/images/example.jpg" // مسیر درست یا URL کامل

alt="Example Image"

width={500} // طول تصویر

height={300} // عرض تصویر

);

}

- استفاده از <link> دستی:

اگر نیاز به استفاده از <"link rel="preload> به صورت دستی دارید، اطمینان حاصل کنید که مقدار imagesrcset دقیقاً مطابق فرمت مورد انتظار مرورگر باشد. به طور مثال:

<link

rel="preload"

as="image"

href="/example.jpg"

imagesrcset="/example.jpg 1x, /example@2x.jpg 2x"

imagesizes="(max-width: 600px) 100vw, 50vw"

- بروزرسانی Next.js:

در برخی موارد، این مشکل به نسخه خاصی از Next.js مربوط می‌شود. اطمینان حاصل کنید که از آخرین نسخه Next.js استفاده می‌کنید. برای بررسی این مورد:

در مرحله اول روی گزینه "Setup Node.js App" از بخش "software" کلیک نمایید.

تصویر(2)

سپس روبروی پروژه ای که می خواهید دستورات لازم برای آن انجام گردد، گزینه مداد را جهت ویرایش انتخاب کنید.

تصویر(3)

در صفحه جدید، عبارت مشخص شده در تصویر زیر را کپی نمایید. لازم به ذکر است که با یک کلیک روی این عبارت، کپی انجام می شود.

تصویر(4)

پس از کپی عبارت می بایست وارد محیط Terminal شوید. به همین منظور در صفحه اصلی سی پنل و از قسمت "Advanced" گزینه "Terminal" را انتخاب نمایید.

تصویر(5)

پس از ورود به محیط Terminal کد کپی شده در قسمت 3 را وارد کنید و ENTER را بزنید تا به مسیر پروژه تان هدایت شوید.

تصویر(6)

سپس دستور زیر را وارد نمایید:

npm install next@latest

مرکز آموزش میهن وب هاست