如何将API获取的图片链接正确赋值给img标签的src属性

你的代码无法正常赋值图片地址，核心错误只有一个：给src赋值时给pic加了双引号，浏览器会把字面量字符串"pic"当成图片路径去请求，根本不会读取你存在pic变量里的接口返回值。
另外两个会影响排查/代码规范的小问题：

• fetch请求链没有写错误捕获，接口请求失败、数据结构异常时控制台不会报对应错误，很难定位问题
• 形参respons是拼写笔误，常规写法为response，不影响运行但不符合通用编码习惯

JavaScript部分：

fetch("https://restcountries.com/v3.1/all")
  .then(response => {
    if (!response.ok) throw new Error("接口请求异常，状态码：" + response.status);
    return response.json();
  })
  .then(data => {
    const pic = data[0].flags.png;
    // 注意这里不要给变量加引号
    document.getElementById("img").src = pic;
  })
  .catch(err => {
    console.error("图片加载失败：", err);
  })

HTML部分建议补充alt属性描述更规范，原有结构无需改动：

<img src="" alt="国家国旗" id="img">

如果后续再遇到类似资源加载问题，可以在赋值前加一句console.log(pic)，打开浏览器控制台就能看到你实际拿到的地址是什么，直接点开地址就能验证是否能正常访问，是前端接口联调最常用的排查手段。

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