我有一个简单的 JSON 文件,如下所示:
{
"products": [
{
"title": "United Colors of Benetton Men's Shirt",
"description": "Cool, breezy and charming – this solid green shirt from United Colors of Benetton is born on the beach. Effortlessly classy, this full sleeved shirt is perfect when worn with faded blue jeans and a pair of shades for a weekend get-together.",
"quantity": "10",
"cost": "3.00",
"brand": "United",
"image": "catalog/images/img2.jpg",
"category": "1",
"popularity": "100"
}
]
}
我正在使用Mustache.js将此JSON文件显示在以下模板中:
<table class="product-list">
{{#products}}
<tr>
<td>
<table class="product">
<tr>
<td class="product-image">
<img src"{{image}}" height="150" width="150" />
</td>
<td class="product-details">
<p class="title">{{title}}</p>
<p class="description">{{description}}</p>
<p class="quantity"><b>Quanity Available: </b>{{quantity}}</p>
<p class="cost"><b>Cost: </b>£ {{cost}}</p>
<p class="brand"><b>Brand:</b> {{brand}}</p>
</td>
</tr>
</table>
</td>
</tr>
{{/products}}
</table>
一切都工作正常,但由于图像属性中的斜杠被转义,因此图像无法显示。
我尝试通过在斜杠前面添加反斜杠来转义JSON文件中的斜杠。但是我得到了错误的路径。
catalog\/images\/img2.jpg
我也尝试使用{{{ image }}}禁用HTML转义,然后得到了以下结果。
catalog\="" images\="" img2.jpg=\""
如何正确地显示图像属性?
有人可以帮我吗?
编辑: 使用 JS 生成模板:
$template = $('#product-template').html();
$renderedHtml = Mustache.render($template, $data);
$('#content').html($renderedHtml);
src
后面加上=
,看起来你也是;) 更新了示例fiddle。 - user13500