如何在HTML中从数组展示图片？下拉搜索功能故障排查

我是网站开发新手，正在开发一个简单项目：我有一个包含水果名称及对应GIF图片链接的数组，希望制作一个带搜索功能的下拉选择框，用户选择或搜索水果后，展示该水果的名称和GIF图片。目前多数功能已实现，但图片仅显示链接而非实际图片，特此附上相关代码，恳请指导解决该问题。

HTML代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SolemnBotZ</title>
    <link rel="stylesheet" href="stylesF.css">
</head>
<body>
      <label for="fruitinfos">Select a fruit:</label>
    <input type="text" id="fruitinfos" list="fruitinfoList" placeholder="Type to search...">
    
    <datalist id="fruitinfoList">
    </datalist>
    <div id="fruitinfoResult"></div>
    <div id="fruitinfoName"></div>
      <table id="fruitinfoTable">
        <thead>
          <tr>
            <th>Fruit</th>
            <th>Image</th>
          </tr>
        </thead>
        <tbody>
          <th><div id="fruitinfoValue"></div></th>
          <th><img src="fruitinfoSprite"></th>
        </tbody>
      </table>
      <script src="fruitinfo.js"></script>
      <script src="scriptest.js"></script>
      </body>
      </html>

JavaScript代码 #

const fruitinfoSelect = document.getElementById('fruitinfoList');
fruitinfo.forEach((fruitinfo) => {
  const option = document.createElement('option');
  option.text = fruitinfo.name;
  option.value = fruitinfo.value;
  fruitinfoSelect.appendChild(option);
});

// Display selected fruitinfo value
function displayfruitinfo() {
  const fruitinfoSelect = document.getElementById('fruitinfos');
  const fruitinfoResult = document.getElementById('fruitinfoResult');
  const selectedValue = fruitinfoSelect.value;
  if (selectedValue !== '') {
    const selectedfruitinfo = fruitinfo.find((fruitinfo) => fruitinfo.value === selectedValue);
      fruitinfoName.innerHTML = `
        <div class="fruitinfo-box">
          <p>${selectedfruitinfo.name}</p>
        </div>`;
      fruitinfoValue.innerHTML = `
        <div class="fruitinfo-box">
          <p>${selectedfruitinfo.value}</p>
        </div>`;
    fruitinfoSprite.innerHTML = `
        <div class="fruitinfo-box">
        <p>${selectedfruitinfo.sprite}</p>
        </div>`;
  } else {
    fruitinfoResult.innerHTML = '';
  }
}

document.getElementById('fruitinfos').addEventListener('input', displayfruitinfo);

水果数组（fruitinfo.js） #

const fruitinfo = 
[{"name":"orange","value":"Orange","sprite":"https://media0.giphy.com/media/iJgyjInSJyTxNYlEfx/giphy.gif?cid=6c09b952d896a56e1d9c1f71daf0e82923fa81447709142a&rid=giphy.gif&ct=s"},
{"name":"apple","value":"Apple","sprite":"https://media.tenor.com/1HdVv6rRFcQAAAAM/excited-apple.gif"},
{"name":"banana","value":"Banana","sprite":"https://img1.picmix.com/output/stamp/normal/6/4/3/4/1754346_b0227.gif"},
{"name":"watermelon","value":"Watermelon","sprite":"https://media2.giphy.com/media/l2JJuGNzLVmLDcD0Q/giphy.gif"},
{"name":"lemon","value":"Lemon","sprite":"https://media4.giphy.com/media/jTMPEWFcgbEYc95yF5/giphy.gif"},
{"name":"grape","value":"Grape","sprite":"https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/56a8aa84301127.5d587dbe6f5d2.gif"},
{"name":"mango","value":"Mango","sprite":"https://media2.giphy.com/media/SXNbTnAVzfv9NvEyRE/200w.gif?cid=6c09b9523jcd3cpliienj5jgisee2393douikwx5la7zshdt&rid=200w.gif&ct=s"}
]

问题出在两点：

1. HTML中的<img>标签没有设置可被JS定位的id，且src是固定字符串，无法动态修改。
2. JS中你把GIF链接放在了<p>标签里，而不是设置<img>的src属性。

修改步骤： #

1. 修正HTML中的图片标签

给表格里的图片标签添加id，并清空默认src：

<th><img id="fruitinfoSprite" src="" alt="Fruit GIF"></th>

2. 修改JavaScript中的图片渲染逻辑

删除原来对fruitinfoSprite.innerHTML的赋值，改为设置图片元素的src属性：

// 替换原fruitinfoSprite.innerHTML代码
document.getElementById('fruitinfoSprite').src = selectedfruitinfo.sprite;

修改后的完整JavaScript代码 #

const fruitinfoSelect = document.getElementById('fruitinfoList');
fruitinfo.forEach((fruitinfo) => {
  const option = document.createElement('option');
  option.text = fruitinfo.name;
  option.value = fruitinfo.value;
  fruitinfoSelect.appendChild(option);
});

// Display selected fruitinfo value
function displayfruitinfo() {
  const fruitinfoSelect = document.getElementById('fruitinfos');
  const selectedValue = fruitinfoSelect.value;
  if (selectedValue !== '') {
    const selectedfruitinfo = fruitinfo.find((fruitinfo) => fruitinfo.value === selectedValue);
    fruitinfoName.innerHTML = `
      <div class="fruitinfo-box">
        <p>${selectedfruitinfo.name}</p>
      </div>`;
    fruitinfoValue.innerHTML = `
      <div class="fruitinfo-box">
        <p>${selectedfruitinfo.value}</p>
      </div>`;
    // 设置图片src
    document.getElementById('fruitinfoSprite').src = selectedfruitinfo.sprite;
  } else {
    fruitinfoResult.innerHTML = '';
    // 清空图片
    document.getElementById('fruitinfoSprite').src = '';
  }
}

document.getElementById('fruitinfos').addEventListener('input', displayfruitinfo);

修改完成后，选中水果时就会正确加载并显示对应的GIF图片。

内容的提问来源于stack exchange，提问作者Solemn Messiah