Невозможно назначить строку в качестве входных данных JSON в файле Pug с параметрами Imigx

Question

Я преобразовал рабочий HTML-код в Pug, который использует параметры из библиотеки Imgix.js, но в версии Pug есть ошибка. Я пробовал оба метода (обратите внимание на галочки на ix-params):

img(ix-path="image.jpg", ix-params='{"w": 100}')
img(ix-path="image.jpg", ix-params={"w": 100})

Но получить Uncaught SyntaxError: Unexpected end of JSON input ошибка консоли. Похоже, что ix-params не позволяет присваивать строку как ввод JSON?

Я могу заставить его работать, установив ix-params как переменная, однако это не подходит для производства.

- var ix_params = { "w": 100 }
img(ix-path="image.jpg", ix_params)

Answer 1

В соответствии с документацией imgix вам нужно вывести что-то похожее на это:

<img
  ix-path="unsplash/hotairballoon.jpg"
  ix-params='{
    "w": 300,
    "h": 500,
    "fit": "crop",
    "crop": "right"
  }'
  alt="A hot air balloon on a sunny day"
>

Второй способ, которым вы пытались это сделать, это то, что вызывает ошибку, поскольку pug ожидает строку или выражение JavaScript после знака равенства, и вы отправляете ему необработанный объект JSON.

Итак, давайте попробуем это:

img(ix-path="unsplash/hotairballoon.jpg" ix-params='{"w": 300, "h": 500, "fit": "crop", "crop": "right"}' alt="A hot air balloon on a sunny day")

Производит этот вывод, который вы явно не хотите:

<img ix-path="unsplash/hotairballoon.jpg" ix-params="{&quot;w&quot;: 300, &quot;h&quot;: 500, &quot;fit&quot;: &quot;crop&quot;, &quot;crop&quot;: &quot;right&quot;}" alt="A hot air balloon on a sunny day"/>

Способ получения неэкранированных атрибутов скрыт в нижней части документа, но этот атрибут нужно начинать с удара /! и заключите атрибут в тильды ( `):

Это заявление мопса:

img(ix-path="unsplash/hotairballoon.jpg" ix-params!= `{"w": 300, "h": 500, "fit": "crop", "crop": "right"}` alt="A hot air balloon on a sunny day")

Выводит это в документ, который близок, но не совсем:

<img ix-path="unsplash/hotairballoon.jpg" ix-params="{"w": 300, "h": 500, "fit": "crop", "crop": "right"}" alt="A hot air balloon on a sunny day"/>

Переключение двойных и одинарных кавычек должно работать:

img(ix-path="unsplash/hotairballoon.jpg" ix-params!= "{'w': 300, 'h': 500, 'fit': 'crop', 'crop': 'right'}" alt="A hot air balloon on a sunny day")

Производит это:

<img ix-path="unsplash/hotairballoon.jpg" ix-params="{'w': 300, 'h': 500, 'fit': 'crop', 'crop': 'right'}" alt="A hot air balloon on a sunny day"/>

Лично я предпочел бы иметь одинарные кавычки снаружи и двойные кавычки внутри, но не могу понять, как это сделать. Тем не менее, это должно работать, поскольку это допустимый объект JavaScript.