时间戳

首页 > 解决方案 > 无法在 Pug 文件中使用 Imigx 参数将字符串分配为 JSON 输入

json - 无法在 Pug 文件中使用 Imigx 参数将字符串分配为 JSON 输入

问题描述

我已将工作 HTML 代码转换为使用Imgix.js 库中的参数的Pug ，但 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)

标签： jsonpugimgix-js

解决方案

根据 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"/>

获取未转义属性的方法隐藏在文档底部附近，但您需要以 bang/ 开头该属性!并用波浪号 ( ` ) 括起该属性：

这个哈巴狗声明：

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 对象。

推荐阅读