Блог

Главная - Вопросы по программированию - Далее JS и Cloudinary, изображения не загружаются

Далее JS и Cloudinary, изображения не загружаются

#javascript #next.js #cloudinary

Вопрос:

Я изучаю следующий JS и пытаюсь экспортировать свое приложение в статический сайт. В результате я использую Cloudinary для обработки изображений, проблема в том, что они не отображаются. Далее JS, похоже, добавляет некоторые параметры в URL-адрес, которые разбивают изображения, вот пример:

https://res.cloudinary.com/dnliyglel/image/upload/v1624031405/next-tutorial/f_auto,c_limit,w_384,q_auto/images/profile_ileph2.jpg (не работает)

https://res.cloudinary.com/dnliyglel/image/upload/v1624031405/next-tutorial//images/profile_ileph2.jpg (действительно работает)

Похоже,что дополнительные f_auto, c_limit,w_384,q_auto в пути нарушают его.

Это потому, что у меня есть бесплатная учетная запись Cloudinary? Как мне это исправить?

Для справки, вот мой next.config.js:

 module.exports = {
  basePath: '/out',
  assetPrefix: '/out',
  images: {
    loader: 'cloudinary',
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    path: 'https://res.cloudinary.com/dnliyglel/image/upload/v1624031405/next-tutorial/',
  },
    exportPathMap: async function() {
    const paths = {
      '/': { page: '/' },
      '/posts/first-post': { page: '/posts/first-post'}
      };
      return paths; 
    }
  };

И вот пример того, как он добавляется в компонент:

 <Image
  priority
  src="/images/profile_ileph2.jpg"
  className={utilStyles.borderCircle}
  height={144}
  width={144}
  alt={name}
/>

Ответ №1:

URL — адрес ресурса при включении преобразований неверен.

https://res.cloudinary.com/dnliyglel/image/upload/v1624031405/next-tutorial/f_auto,c_limit,w_384,q_auto/images/profile_ileph2.jpg

Номер версии ( v1624031405 ) и часть папки public_id ( next-tutorial ) находятся до преобразований, в то время как остальная часть public_id ( images/profile_ileph2 ) находится после.

Перемещение их в нужное место означает, что изображение загружается должным образом: https://res.cloudinary.com/dnliyglel/image/upload/f_auto,c_limit,w_384,q_auto/v1624031405/next-tutorial/images/profile_ileph2.jpg

Вы могли бы попробовать изменить path с:

 https://res.cloudinary.com/dnliyglel/image/upload/v1624031405/next-tutorial

Для:

 https://res.cloudinary.com/dnliyglel/image/upload/

Затем включите полный public_id (включая next-tutorial папку) в свой <Image/> компонент src . Например.

 src="/next-tutorial/images/profile_ileph2.jpg"

Более подробную информацию о структуре URL-адресов Cloudinary можно найти в приведенном ниже разделе документации:
https://cloudinary.com/documentation/image_transformations#transformation_url_syntax

Метки: ,