GOOGLE ADS

понедельник, 25 апреля 2022 г.

Next.JS сжимает изображения в пустое изображение base64

У меня есть изображение pizza.jpg, которое было загружено на страницы Cloudflare. Я помещаю его на страницу (файл.jsp)

<div className="product_img">
<Image src={'pizza.jpg'} loader={localLoader} alt={'Pizza'} width='300' height='150'/>
</div>

Локальный загрузчик:

function localLoader({src, width, quality}) {
return `https://2abf8861.site-deplo.pages.dev/${src}`;
}

Конфигурация Next.js:

const nextConfig = {
reactStrictMode: true,
images: {
domains: ['2abf8861.site-deploy.pages.dev'],
formats: ['image/avif', "image/webp"],
loader: 'custom'
},
assetPrefix: './'
}

Затем я экспортирую страницу, используя

next build && next export

И этот образ становится:

 <img
style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0"
alt="" aria-hidden="true"
src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27300%27%20height=%27150%27/%3e"/></span><img
alt="Pizza" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
decoding="async" data-nimg="intrinsic"
style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/>
<noscript>
<img
alt="Pizza"
srcSet="https://2abf8861.site-deploy.pages.dev/pizza.jpg 1x, https://2abf8861.site-deploy.pages.dev/pizza.jpg 2x"
src="https://2abf8861.site-deploy.pages.dev/pizza.jpg" decoding="async" data-nimg="intrinsic"
style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"
loading="lazy"/>
</noscript>

Если я использую тег img из noscript, он работает нормально. В противном случае это будет белое изображение размером 1*1px.

Или я могу использовать

next run dev 

и он будет построен нормально.
введите описание изображения здесь


Решение проблемы

Удален каталог.next, запущен

next build && next export

снова, и эта проблема была исправлена.

Комментариев нет:

Отправить комментарий

Laravel Datatable addColumn returns ID of one record only

Я пытаюсь использовать Yajra Datatable для интеграции DataTable на свой веб-сайт. Я смог отобразить таблицу, но столкнулся с проблемой. В по...