在解析模板 crossrider 扩展中插入图像答案

【问题标题】：Insert Image in parse template crossrider Extension在解析模板 crossrider 扩展中插入图像
【发布时间】：2015-02-12 10:38:22
【问题描述】：

如何在 crossrider 中将图像插入到 html 中。

我有一个 html 模板，稍后我会对其进行解析。在那个 html 中我需要一张图片。

告诉我怎么做。我尝试了如下但无法成功

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <!-- This meta tag is relevant only for IE -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    </head>
    <body>
       <div id="tubevid_formats">
        <div id='close_span'>&times;</div>
            <div class="wrapper">
            <h1>Download Links</h1>
                <ul>
                    <% for (var i=0; i<vids.length; i++) { %>
                    <li>
                        <a id="format" href="<%=vids[i]['url'] %>"><%=vids[i]['type']%> - <%=vids[i]['pixels']%>Px - <%=vids[i]['size']%> </a>
                       <div class="dwn-icon"><img src="<%= appAPI.resources.get('img/download.png')%>" alt=""></div>
                    </li>
                    <% } %>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div> 
    </body>
    </html>

我正在解析上面的html，并将格式化的代码注入到网页中的一个div中

       var formats = appAPI.resources.parseTemplate("formats.html",result);
        $('#tubevid_div').html('');
        $code=$(formats);
        $('#tubevid_div').prepend($code);

【问题讨论】：

您必须在 Crossrider 扩展中使用 JS 或 jQuery 代码。然后只需附加图像标签。
我已经使用 Jquery 完成了，您可以从上面的代码中看到它。但我的图像无法加载，我的疑问是如何将图像从资源文件夹加载到我要解析的 html
为了提供帮助，请提供一些上下文和相关代码，显示如何打开/注入 html。 [披露：我是 Crossrider 的员工]
@Shlomo 更新了代码，如果您需要任何详细信息，请告诉我

标签： html image popup crossrider

【解决方案1】：

感谢更新代码。

您注入的 HTML 在 HTML 页面的 DOM 范围内运行，并且无权访问 extension.js 范围；因此，appAPI.resources.get 未定义，在您的示例中不起作用。

为了实现您的目标，您可以尝试在将 HTML 注入页面范围之前添加资源。由于您使用的是appAPI.resources.parseTemplate，我建议您将资源作为 result 对象的一部分传递。

因此，使用您的代码 sn-p，HTML 将如下所示：

<div id="tubevid_formats">
  <div id='close_span'>&times;</div>
  <div class="wrapper">
    <h1>Download Links</h1>
    <ul>
      <% for (var i=0; i<vids.length; i++) { %>
        <li>
          <a id="format" href="<%=vids[i]['url'] %>"><%=vids[i]['type']%> - <%=vids[i]['pixels']%>Px - <%=vids[i]['size']%> </a>
          <div class="dwn-icon"><img src="<%=resImage%>" alt=""></div>
        </li>
      <% } %>
    </ul>
  </div>
  <div class="clearfix"></div>
</div>

...和代码：

result.resImage = appAPI.resources.get('img/download.png');
var formats = appAPI.resources.parseTemplate("formats.html",result);
$('#tubevid_div').html('');
$code=$(formats);
$('#tubevid_div').prepend($code);

[披露：我是 Crossrider 的员工]

【讨论】：

它没有按预期工作。你测试过吗？它正在注入图像的内容而不是图像的位置。
抱歉，我没有机会测试它，最早可以在周日测试。图像出现了吗？您不能将 src 指定为此上下文中资源文件的 URL，因为页面范围无权访问扩展程序的资源；因此，您必须将资源图像嵌入到 HTML 中，如图所示。
我测试了示例代码 sn-p 并且它可以工作。请检查您的代码是否定义了 result 对象以及资源是否存在于您的扩展中。
我得到了一些符号..不是图像..我通过将图像保存在我的服务器中将图像从我的服务器插入到我的结果对象中的任何方式