Блог

Я знаю, что мой вариант использования странный (я извлекаю изображения из безголовой CMS для статического обслуживания), но я ни за что на свете не могу понять, как использовать next-optimized-images мои внешние изображения во время разработки для обслуживания /static/images/ в производстве.

То, как я называю свои образы:

<img src={featured_img.url} /> (это строка URL-адреса)

Что я хотел бы сделать, чтобы оптимизировать/изменить размер/и т. Д. Мои изображения во время сборки: <img src={require(featured_img.url)} /> (Обычно я использую обратные ссылки с литералами шаблонов, но здесь я не могу.

По сути, я хотел бы извлечь изображения из CMS во время сборки, оптимизировать/изменить их размер и обслуживать их .static/images/ во время производства.

Надеюсь, это имеет смысл, и, пожалуйста, дайте мне знать, если вам понадобится какая-либо другая информация от меня.

Мой next.config.js файл:

 const withPlugins = require('next-compose-plugins')
const withSvgr = require('next-svgr')
const optimizedImages = require('next-optimized-images')
const withTM = require('next-transpile-modules')(['next-slicezone'])

module.exports = withPlugins([
  withTM,
  withSvgr,
  [optimizedImages, {
    handleImages: ['jpeg', 'png', 'webp', 'gif'],
  }]],
  {
    future: 
    {
      webpack5: true
    },
    modules: true,
  },
)
 

Мой файл .babelrc:

 {
  "presets": [
    [
      "next/babel"
    ]
  ],
  "plugins": [
    "react-require",
    "react-optimized-image/plugin"
  ]
}
 

В настоящее время я использую следующие оптимизированные изображения@canary, но 2.6 тоже не сработало.