如何根据h1标签文本修改HTML img的src属性？

数据老陈

2026-8-1

解决方案

你的代码存在几个关键问题导致无法正常运行，以下是修正后的完整实现：

修正后的HTML

<h1>This is about Red Apples</h1>
<img id="fruitimage" src="default-image.jpg"/>

修正后的JavaScript

window.addEventListener("load", function() {
  const h1 = document.querySelector("h1");
  const fruitImage = document.getElementById("fruitimage");
  
  const fruitMap = {
    'red apples': 'redapples-image.jpg',
    'blue blueberries': 'blueberries-image.jpg',
    'yellow bananas': 'yellowbananas-image.jpg'
  };

  function getImageSource(source, map) {
    if (!source || !map) return 'default-image.jpg';
    
    const text = source.innerText.toLowerCase();
    for (const key in map) {
      if (map.hasOwnProperty(key) && text.includes(key.toLowerCase())) {
        return map[key];
      }
    }
    return 'default-image.jpg'; // 无匹配时返回默认图
  }

  fruitImage.src = getImageSource(h1, fruitMap);
}, false);

关键修改说明

移除错误的imageNode属性：原代码中document.getElementById('fruitimage').imageNode.src是冗余写法，直接使用.src即可修改图片源地址。
统一大小写匹配：将h1文本和映射键都转为小写，避免因大小写不一致导致匹配失败（比如原h1中的"Red Apples"与映射里的"red apples"）。
添加默认兜底逻辑：当没有找到匹配文本时，返回默认图片路径，防止图片加载失败。
包裹在load事件中：确保DOM完全加载后再执行代码，和你之前实现文本切换的逻辑保持一致，避免找不到DOM元素的问题。
优化命名可读性：将map改为fruitMap、函数名influenceImage改为getImageSource，提升代码可维护性。