【问题标题】:HTML `img` tag can't display as image in object jqueryHTML`img`标签不能在对象jquery中显示为图像
【发布时间】:2016-09-15 08:26:44
【问题描述】:

我有这样的“建议”变量的数据,这是在我将对象“建议”转换为字符串之后。

{"value":"<img src=\"http://localhost/erp/assets/images/product/123.jpg\"> 123123123 t-shirt","data":"ABC098765"}

但是&lt;img src="\"http://localhost/erp/assets/images/product/123.jpg\"&gt;不能显示为图片,图片标签在追加后只能显示为文本

这是输出显示。

html += '<div class="' + className + '" data-index="' + i + '">' + formatResult(suggestion, value, i) + '</div>';

完整的脚本

    $.each(that.suggestions, function (i, suggestion) {
        if (groupBy){
            html += formatGroup(suggestion, value, i);
        }
        html += '<div class="' + className + '" data-index="' + i + '">' + formatResult(suggestion, value, i) + '</div>';
    });

格式化结果

Autocomplete.formatResult = function (suggestion, currentValue) {
        // Do not replace anything if there current value is empty
        if (!currentValue) {
            return suggestion.value;
        }

        var pattern = '(' + utils.escapeRegExChars(currentValue) + ')';

        return suggestion.value
            .replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/&lt;(\/?strong)&gt;/g, '<$1>');
    };

输出显示时如何使图片标签为图片?

谢谢

【问题讨论】:

  • 需要formatResult功能码调试。
  • 在哪里将html 添加到DOM? formatResult 长什么样子?
  • @Sasikumar 我已经在上面展示了
  • @mplungjan 是的,我在上面再次展示了
  • console.log 在返回之前的Suggestion.value?您可能不会转换 \"

标签: javascript jquery html css image


【解决方案1】:

使用此 Stripslashes 函数在返回 suggestion.value 时去除斜线。可能是因为您的图像没有正确显示多余的斜线。

function stripslashes (str) {
  return (str + '').replace(/\\(.?)/g, function (s, n1) {
    switch (n1) {
    case '\\':
      return '\\';
    case '0':
      return '\u0000';
    case '':
      return '';
    default:
      return n1;
    }
  });
}

【讨论】:

    猜你喜欢
    • 2014-09-29
    • 2021-11-30
    • 1970-01-01
    • 2022-01-24
    • 1970-01-01
    • 2023-03-20
    • 2011-05-18
    • 1970-01-01
    相关资源
    最近更新 更多