Question

我有一个简单的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>&pound; {{cost}}</p>
                        <p class="brand"><b>Brand:</b> {{brand}}</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    {{/products}}
</table>

一切正常但由于某种原因，图片属性中的斜杠会被转义，因为图片不会显示。

我已经尝试通过在它们前面添加反斜杠来转义JSON文件中的斜杠。但不是正确的道路，我得到了这个。

catalog\&#x2f;images\&#x2f;img2.jpg

我也尝试使用{{{image}}}禁用HTML转义，我就明白了。

catalog\="" images\="" img2.jpg=\""

如何正确显示图像属性？

有人可以帮我解决这个问题吗？

编辑： JS用于生成模板：

$template = $('#product-template').html();
$renderedHtml = Mustache.render($template, $data);
$('#content').html($renderedHtml);

Answer 1

从我看来它应该适用于三重胡须{{{image}}}。在=之后，您也遗漏了src。

示例小提琴：

＆＃13;

var jsn = {
  "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": "http://static.cilory.com/26111-large_default/united-colors-of-benetton-men-white-t-shirt.jpg",
      "category": "1",
      "popularity": "100"
    }

  ]
};

var t = document.getElementById('template').innerHTML;
var m = Mustache.to_html(t, jsn);
document.getElementById('res').innerHTML = m;
console.log(m);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script id="template" type="text/template">
  <table class="product-list">
    {{#products}}
    <tr>
      <td>
        <table class="product">
          <tr>
            <td class="product-image">
              <img src="{{{image}}}" height="180" 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>&pound; {{cost}}</p>
              <p class="brand"><b>Brand:</b> {{brand}}</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    {{/products}}
  </table>
</script>
<div id="res"></div>

＆＃13;

Mustache.js逃避“/”

1 个答案: