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

Question

如何在 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);

Answer 1

感谢更新代码。

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

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

因此，使用您的代码片段，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 员工]

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

Insert Image in parse template crossrider Extension

html

image

popup

crossrider