使用NewsAPI获取图片URL并在HTML中显示的问题求助

我目前尝试在HTML中展示newsapi.org提供的新闻图片，已经能实现作者、标题等内容的展示，但图片无法显示。我尝试用onload函数，但不确定是否需要。以下是我的代码：

原JavaScript代码 #

const url = "https:newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=xxxxxx";
fetch(url)
  .then((response) => response.json())
  .then((data) => {
    console.log(data)
    let show = () => {
      let img = document.getElementById("img");
      img.src = data.articles[0].urlToImage;

      let img1 = document.getElementById("img1");
      img1.src = data.articles[1].urlToImage;

      let img2 = document.getElementById("img2");
      img2.src = data.articles[2].urlToImage;

    }
  });

原HTML代码 #

<html lang="en">
  <head>
    <script src="news.js"></script>
    <link rel="stylesheet" href="test.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img id="img" onload="show()" alt="news">
    <img id="img1" onload="show()" alt="news">
    <img id="img2" onload="show()" alt="news">
  </body>
</html>

问题分析与解决方案 #

你的代码存在几个核心问题：

1. URL格式错误：请求地址少了//，应该是https://newsapi.org/...，这会直接导致请求失败拿不到数据。
2. 函数作用域问题：show函数定义在fetch的回调内部，全局作用域访问不到，HTML里的onload="show()"会报错找不到函数。
3. DOM加载顺序问题：script放在head里，执行时body的img元素还没渲染，getElementById会返回null，赋值src无效。
4. 不必要的onload事件：你是主动给图片设置src，不需要靠img的onload事件触发赋值逻辑。

修正后的代码 #

JavaScript代码

// 补全URL的//，确保请求正常
const url = "https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=xxxxxx";
fetch(url)
  .then((response) => {
    // 检查请求是否成功，避免解析错误数据
    if (!response.ok) {
      throw new Error(`请求失败: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    console.log(data);
    // 直接给图片赋值src，无需额外函数
    const img = document.getElementById("img");
    // 用可选链避免某条新闻无图片时报错
    img.src = data.articles[0]?.urlToImage || '';
    
    const img1 = document.getElementById("img1");
    img1.src = data.articles[1]?.urlToImage || '';
    
    const img2 = document.getElementById("img2");
    img2.src = data.articles[2]?.urlToImage || '';
  })
  .catch((error) => {
    // 捕获请求或数据处理中的错误，方便排查
    console.error('获取新闻数据出错:', error);
  });

HTML代码

<html lang="en">
  <head>
    <link rel="stylesheet" href="test.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img id="img" alt="news">
    <img id="img1" alt="news">
    <img id="img2" alt="news">
    <!-- 把script移到body末尾，确保DOM元素已加载 -->
    <script src="news.js"></script>
  </body>
</html>

额外说明 #

• 把script放在body最后，保证执行JS时所有img元素都已存在，不会出现找不到元素的情况。
• 可选链?.可以防止当新闻条目没有urlToImage字段时抛出错误，避免页面逻辑中断。
• 增加错误处理逻辑，能快速定位请求失败或数据异常的问题。

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