好吧，让我们把这个问题分解成更小的问题，这样更容易解决。
我们需要：
- 根据其类/ID（
.image_file_name 和 #show_image）查找列元素
- 查找列的索引。所以我们根据标题单元格 (
<th>) 的索引知道要获取哪个数据单元格 (<td>)
- 检查图像是否存在（当我们尝试获取图像时它是否返回
200 或404）
- 创建图像元素并将它们附加到适当的行/列
让我们为此创建一些辅助函数：
/**
* Return the index of the given column.
*
* @param {HTMLElement} column
* @return {number}
*/
const getColumnIndex = (column) => {
const row = column.parentNode;
const columns = [...row.children];
return columns.indexOf(column);
}
getColumnIndex() 函数接受一列（作为 HTMLElement）并返回其索引。
/**
* Asynchonously check if the file with the given filename exists.
*
* @return {Promise<boolean>}
*/
const fileExists = async (filename) => {
const response = await fetch(filename, { method: 'HEAD' });
return response.ok;
}
fileExists() 函数是异步的（返回 Promise）。它接受图像文件名并返回一个解析为boolean的Promise，指示图像是否存在（响应200 OK状态）或不存在（响应非正常状态，即404 Not Found）。
/**
* Create an image element with the given URL.
*
* @param {string} url
* @return {HTMLElement}
*/
const createImageElement = (url) => {
const image = document.createElement('img');
image.setAttribute('src', url);
return image;
};
createImageElement() 函数接受一个 URL，创建一个 <img> 元素并返回它。
现在我们有了辅助函数，让我们编写剩下的部分。我们将监听 DOMContentLoaded 事件以确保初始 HTML 文档已完全加载（即我们的 <table> 存在）。
/**
* Run the initial HTML document has been completely loaded.
*/
const init = async () => {
// Do stuff
}
window.addEventListener('DOMContentLoaded', init);
让我们获取表格及其行：
// Get the table and its rows
const table = document.querySelector('.dataframe');
const rows = table.querySelectorAll('tbody > tr');
如果我们知道表格的布局，我们可以显式设置image_file_name 和show_image 索引：
const filenameIndex = 1;
const imageIndex = 4;
否则，我们可以使用我们的getColumnIndex() 函数来查找它们，如下所示：
// Get the `image_file_name` and `show_image` columns
const filenameColumn = table.querySelector('th.image_file_name');
const imageColumn = table.querySelector('th#show_image');
const filenameIndex = getColumnIndex(filenameColumn);
const imageIndex = getColumnIndex(imageColumn);
最后，我们将遍历每一行，获取文件名，检查该图像是否存在，如果存在则显示它。
// Iterate over each row
for await (const row of rows) {
// Get all columns of the currently iterated row
const columns = row.children;
// Get the filename
const filename = columns[filenameIndex].textContent;
// Check if the image exists
const imageExists = await fileExists(filename);
// If it exists
if (imageExists) {
// Clear the `show_image` column
columns[imageIndex].innerHTML = '';
// Create an image element
const image = createImageElement(filename);
// Add the image
columns[imageIndex].appendChild(image);
}
}
把它们放在一起：
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th>Image_id</th>
<th class="image_file_name">image_file_name</th>
<th>Image_Text_output </th>
<th>date</th>
<th id="show_image">Show_image</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>./imagetocsv/img/MessageMediaPhoto-ID-158.jpg</td>
<td>test 2</td>
<td>24-09-2021 12:20:47</td>
<td>NaN</td>
</tr>
<tr>
<td>2</td>
<td>./imagetocsv/img/MessageMediaPhoto-ID-428.jpg</td>
<td>test 2</td>
<td>24-09-2021 12:20:47</td>
<td>NaN</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
/**
* Return the index of the given column.
*
* @param {HTMLElement} column
* @return {number}
*/
const getColumnIndex = (column) => {
const row = column.parentNode;
const columns = [...row.children];
return columns.indexOf(column);
}
/**
* Asynchonously check if the file with the given filename exists.
*
* @return {Promise<boolean>}
*/
const fileExists = async (filename) => {
const response = await fetch(filename, { method: 'HEAD' });
return response.ok;
}
/**
* Create an image element with the given URL.
*
* @param {string} url
* @return {HTMLElement}
*/
const createImageElement = (url) => {
const image = document.createElement('img');
image.setAttribute('src', url);
return image;
};
/**
* Run the initial HTML document has been completely loaded.
*/
const init = async () => {
// Get the table element
const table = document.querySelector('.dataframe');
// Get the `image_file_name` and `show_image` columns
const filenameColumn = table.querySelector('th.image_file_name');
const imageColumn = table.querySelector('th#show_image');
const filenameIndex = getColumnIndex(filenameColumn);
const imageIndex = getColumnIndex(imageColumn);
// Get the table rows
const rows = table.querySelectorAll('tbody > tr');
// Iterate over each row
for await (const row of rows) {
// Get all columns of the currently iterated row
const columns = row.children;
// Get the filename
const filename = columns[filenameIndex].textContent;
// Check if the image exists
const imageExists = await fileExists(filename);
// If it exists
if (imageExists) {
// Clear the `show_image` column
columns[imageIndex].innerHTML = '';
// Create an image element
const image = createImageElement(filename);
// Add the image
columns[imageIndex].appendChild(image);
}
}
};
window.addEventListener('DOMContentLoaded', init);
</script>
免责声明：此答案包括箭头函数、promise、async/await、展开运算符和其他 ES6+ 特性。