Insert Image in parse template crossrider Extension

How i can insert an Image into a html in crossrider.

I have a html template which i will parse it later . in that html i need to have a image.

Let me know how. i tried like below but not able to succeed

    <!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>

I am parsing the above html as below and injecting the formatted code into a div in web page

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

Solution

Thanks for the updated code.

The HTML you are injecting runs in the HTML Page's DOM scope and does not have access to the extension.js scope; hence, appAPI.resources.get is undefined and does not work in your example.

To achieve your goal, you can try adding the resource before injecting the HTML into the page scope. Since you are using appAPI.resources.parseTemplate, I suggest you pass the resource as part of your result object.

So, using your code snippet, the HTML would look like:

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

... and the code:

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

[Disclosure: I am a Crossrider employee]