Документация по Gridsome
Атрибут src и параметры, такие как width, height и quality, должны быть статическими значениями, поскольку они скомпилированы в объект, который содержит URL-адреса и другую информацию, которая будет отображаться в теге img.
Я признаю, что я не постоянный пользователь Gridsome, и все, что следует за этим, исходит из моего понимания Vue/Webpack, документов Gridsome и эта проблема
g-image — это компонент, предоставленный Gridsome, предназначенный для упрощения использования адаптивных изображений. Большая часть работы выполняется во время времени сборки — они используют некоторую магию Webpack для обработки шаблонов Vue. Если найден g-image, считывается его атрибут src, и если он содержит путь к существующему локальному образу, они берут образ, создают несколько его копий с разными размерами и добавляют srcset, который позволяет браузеру решать, какое изображение загружать, в зависимости от размера экрана...
Важно то, что все это происходит во время сборки. Это означает, что ваше приложение не запущено, что означает, что невозможно оценить какое-либо динамическое выражение JS, используемое для src (вероятно, на основе состояния приложения)!
Может показаться, что используется require() (это конструкция Webpack, которая позволяет некоторый динамический контент) заставляет его работать, но вы потеряете основную g-image функцию, которая заключается в автоматическом создании адаптивного изображения...
Это не та проблема, которую легко решить на стороне Gridsome (посмотрите, насколько стара проблема и сколько внимания со стороны сопровождающих она получает). Если вам действительно нужны динамические адаптивные изображения, вам нужно будет использовать простой img и сгенерировать варианты изображения (и srcset) другим способом. Или вы можете использовать Cloudinary для создания этих изображений на лету....
person
Michal Levý
schedule
06.01.2021
