Изображения, обработанные с помощью EltyImageTransformPlugin, отображаются локально, но не отображаются на развернутом в

Изображения, обработанные с помощью EltyImageTransformPlugin, отображаются локально, но не отображаются на развернутом в ⇐ Html

1 сообщение • Страница 1 из 1

Anonymous

Изображения, обработанные с помощью EltyImageTransformPlugin, отображаются локально, но не отображаются на развернутом в

Цитата

Сообщение Anonymous » 09 янв 2026, 18:13

Проблема
Я использую одиннадцать-img и одиннадцатьImageTransformPlugin для обработки ресурсов изображений для статического сайта.
Когда я использую npx Elty --serve на локальном хосте, мои изображения отображаются так, как ожидалось, но когда я развертываю свою папку _site в Интернете, изображения не отображаются вообще. Остальная часть веб-сайта работает так, как я ожидал.
Моя конфигурация для одиннадцатиImageTransformPlugin следующая:

Код: Выделить всё

eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
formats: ["avif", "webp", "svg", "auto"],
failOnError: false,
htmlOptions: {
imgAttributes: {
loading: "lazy",
decoding: "async",
}
},
sharpOptions: {
animated: true,
},
});

Соответствующие зависимости:

Код: Выделить всё

"@11ty/eleventy": "^3.1.2",
"@11ty/eleventy-img": "^6.0.4",

Код, который я пишу для отображения изображений, выглядит следующим образом:

Код: Выделить всё

[img]../assets/images/about/Image-Name.webp[/img]

Когда мои изображения отображаются на локальном хосте, сгенерированный код обычно выглядит следующим образом:

Код: Выделить всё

[img]/.11ty/image/?src=assets%5Cimages%5Cabout%5CImage-Name.webp&width=350&format=webp&via=transform[/img]

Ни одно из изображений, оптимизированных с помощью EleventyTransformImagePlugin, кажется, даже не попадает в папку _site при локальной сборке. Я думаю, что это может быть источником проблемы, но ничего из того, что я пробовал до сих пор, не решило эту проблему.

Что я пробовал
Я пробовал очистить .cache, локально удалить папку _site, чтобы ее содержимое полностью восстановилось с нуля, а также установить для параметра FailOnError значение true, чтобы устранить все нерешенные проблемы. Несмотря на это, мне не удалось воспроизвести эту проблему локально или решить проблему с развернутым сайтом.
В какой-то момент я предположил, что проблема связана с src, поскольку у меня нет папки .11ty в папке моего сайта. Хотя я думал, что это не удастся из-за генерируемых дополнительных частей src (

Код: Выделить всё

.webp&width=350&format=webp&via=transform). Следуя этой идее, я изменил настройки одиннадцатиTransformImagePlugin

, включив в них outputDir: "_site/@11ty/image/" . Изображения были помещены в ожидаемую папку, но это не повлияло на проблему, поэтому параметр был удален.
URL в моем файле метаданных установлен правильно, поэтому это не вызывает проблемы.

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

Подробнее здесь: https://stackoverflow.com/questions/798 ... t-do-not-d

1767971581

Anonymous

Проблема
Я использую одиннадцать-img и одиннадцатьImageTransformPlugin для обработки ресурсов изображений для статического сайта.
[b]Когда я использую npx Elty --serve на локальном хосте, мои изображения отображаются так, как ожидалось, но когда я развертываю свою папку _site в Интернете, изображения не отображаются вообще. Остальная часть веб-сайта работает так, как я ожидал.[/b]
Моя конфигурация для одиннадцатиImageTransformPlugin следующая:
[code]eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
formats: ["avif", "webp", "svg", "auto"],
failOnError: false,
htmlOptions: {
imgAttributes: {
loading: "lazy",
decoding: "async",
}
},
sharpOptions: {
animated: true,
},
});
[/code]
Соответствующие зависимости:
[code]"@11ty/eleventy": "^3.1.2",
"@11ty/eleventy-img": "^6.0.4",
[/code]
Код, который я пишу для отображения изображений, выглядит следующим образом:
[code]
[img]../assets/images/about/Image-Name.webp[/img]
[/code]
Когда мои изображения отображаются на локальном хосте, сгенерированный код обычно выглядит следующим образом:
[code]
[img]/.11ty/image/?src=assets%5Cimages%5Cabout%5CImage-Name.webp&width=350&format=webp&via=transform[/img]
[/code]
Ни одно из изображений, оптимизированных с помощью EleventyTransformImagePlugin, кажется, даже не попадает в папку _site при локальной сборке. Я думаю, что это может быть источником проблемы, но ничего из того, что я пробовал до сих пор, не решило эту проблему.

Что я пробовал
Я пробовал очистить .cache, локально удалить папку _site, чтобы ее содержимое полностью восстановилось с нуля, а также установить для параметра FailOnError значение true, чтобы устранить все нерешенные проблемы. Несмотря на это, мне не удалось воспроизвести эту проблему локально или решить проблему с развернутым сайтом.
В какой-то момент я предположил, что проблема связана с src, поскольку у меня нет папки .11ty в папке моего сайта. Хотя я думал, что это не удастся из-за генерируемых дополнительных частей src ([code].webp&width=350&format=webp&via=transform). Следуя этой идее, я изменил настройки одиннадцатиTransformImagePlugin[/code], включив в них outputDir: "_site/@11ty/image/" . Изображения были помещены в ожидаемую папку, но это не повлияло на проблему, поэтому параметр был удален.
URL в моем файле метаданных установлен правильно, поэтому это не вызывает проблемы.

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

Подробнее здесь: [url]https://stackoverflow.com/questions/79863785/images-processed-with-eleventyimagetransformplugin-display-locally-but-do-not-d[/url]