小胡子.js转义“/”

Mustache.js escaping "/"

本文关键字：转义 js 小胡子      更新时间：2023-09-26

我有一个简单的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

我还尝试使用 {{{ 图像 }}} 禁用 HTML 转义，我得到了这个。

catalog'="" images'="" img2.jpg='""

如何正确显示图像属性？

谁能帮我解决这个问题？

编辑：JS用于生成模板：

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

据我所知，它应该适用于三重胡须{{{image}}}.src之后，你也错过了=.

小提琴示例：

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);
<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>

覆盖胡子.js escape函数以不转义文本：

    mustache.escape = function (text) {
      return text;
    };
相关文章：