HTML onclick事件问题：图片无法显示的技术求助

我看了你的代码，文本组合功能正常但图片不显示，核心问题出在图片的URL无法正常访问，另外代码里的HTML实体转义也可以简化一下，让代码更清晰。

问题分析 #

• 你使用的谷歌usercontent代理链接通常有访问权限限制或时效性，大概率已经失效，导致图片加载失败。
• 虽然你用HTML实体转义（<、"）的写法合法，但在onclick的字符串里可以更简洁，避免不必要的转义。

修复后的代码 #

我把图片换成了稳定的测试图片链接，同时简化了转义写法，你可以直接使用：

<!DOCTYPE html>
<html>
<body>
  <p> Filler text here. </p>
  <input type="button" value="Test 1" onclick="document.getElementById('outputDiv').innerHTML= 'Testing words.';">
  <input type="button" value="Test 2" onclick="document.getElementById('outputDiv').innerHTML= 'Testing combining words and images.' + '<img src=\"https://picsum.photos/200/150\" alt=\"Test Image\">';">
  <hr>
  <div id="outputDiv"> Testing output. </div>
</body>
</html>

关键修改点 #

• 替换失效图片URL：改用Picsum Photos的测试图链接，这类链接专门用于开发测试，稳定可靠。
• 简化标签写法：因为onclick的字符串用单引号包裹，img标签内的双引号只需用反斜杠\转义即可，比HTML实体更易读。

额外建议 #

如果要使用自定义图片，需确保：

• 图片链接是公开可访问的，没有防盗链或权限限制
• 图片格式为浏览器支持的类型（如jpg、png等）
• 先在浏览器直接打开图片链接，确认能正常显示后再写入代码

内容的提问来源于stack exchange，提问作者Conner McClellan