将 .png img 添加到 index.ejs 中动态创建的表中的 td 元素

Question

我刚刚在嵌入式 javascript 的帮助下创建了一个表格。在 messerbill 的帮助下，我想出了这个：

<table id="Table1">   
<tr>
    <th>Kickoff</th>
    <th>Status</th>
    <th>Country</th>
    <th>League</th>
    <th>HomeTeam</th>
    <th>AwayTeam</th>
</tr>
    <% for (var i = 0; i < result.length; i++) { %>
    <% var fileName = result[i].country + ".png" %>     

    <tr>
        <td><%= result[i].Kickoff %> </td>
        <td><%= result[i].statustype %> </td>
        <td><img src="images/flags/<%= fileName %>" alt="images/flags/NoFlag.png" style="width:25px;height:15px;"/> <%= result[i].country %></td>
        <td><%= result[i].league %> </td>
        <td><%= result[i].hteam %> </td>
        <td><%= result[i].ateam %> </td>
    </tr>

<% }; %>

这可行。但是，当找不到 png 文件时，我需要某种错误处理程序。 Messerbill 昨天建议做这样的事情：

<% var path = Directory.GetCurrentDirectory() + "\\" + flags + "\\" + fileName %>

但这会返回错误。关于如何让错误处理程序工作的任何建议。

当在搜索词上找不到 png 文件时，我有兴趣让它从 public/images/flags/noimg.png 返回。

任何帮助将不胜感激

更新：

作为一个选项，我想也许我会尝试在节点应用程序中搜索图标，如下所示：

  var fs = require('fs');
  var arrayLength = arr.length;
  for (var i = 0; i < arrayLength; i++) {
    var imgfile = arr[i].country
    if (fs.exists('../public/images/flags/' + imgfile + ".png") == true) {        
      //console.log('/public/images/flags/' + imgfile + ".png"); 
      console.log('fs exists');       
    } else {
      console.log('Not Found!');   
    }              
  }  

但在这里我遇到了一些错误，因为我无法找到单个图标。

弗雷德里克 :)

Answer 1

只需将图像标签添加到您的循环中：

<% for (var i = 0; i < result.length; i++) { %>
    <tr>
        <td><%= result[i].Kickoff %> </td>
        <td><%= result[i].statustype %> </td>
        <td><%= result[i].country %> <img src="/public/images/<%= result[i].country %>.png" alt="img" /> </td>
        <td><%= result[i].league %> </td>
        <td><%= result[i].hteam %> </td>
        <td><%= result[i].ateam %> </td>
    </tr>
<% }; %>