如何用JavaScript请求国旗API并通过img src显示？加载失败求助

我帮你找出了几个导致图片无法显示的核心问题，咱们逐一解决：

1. 数组索引不匹配（最致命的错误） #

在add_name.html里，你往数组里添加的是4个元素：名字、姓氏、生日、国家。但在personInfo.html中，你却用item[4]去获取国家——要知道数组索引是从0开始的，你的数组只有item[0]到item[3]，item[4]会返回undefined。把这个值拼到API URL里，就会变成https://www.countryflags.io/undefined/shiny/64.png，自然加载不出图片。

修复：把personInfo.html里所有的item[4]替换成item[3]。

2. JavaScript不支持Python的.format()字符串方法 #

你写的'https://www.countryflags.io/{}/shiny/64.png'.format(item[4])是Python的写法，JavaScript里没有这个内置方法，这会直接抛出语法错误，导致后续代码完全无法执行。

修复：改用JavaScript的模板字符串（用反引号`包裹，变量用${变量}插入），这是JS里最简洁的字符串拼接方式：

const flagUrl = `https://www.countryflags.io/${item[3]}/shiny/64.png`;

3. 不必要的Fetch请求+错误的JSON解析 #

你完全不需要用fetch去请求图片——浏览器只要拿到图片URL，设置img的src属性就会自动加载图片。而且图片是二进制数据，你调用response.json()会直接抛出错误，进入catch块，影响代码执行流程。

修复：删掉整个Fetch逻辑，直接设置图片的src即可。

4. 初始img标签的无效src #

你的img标签初始写的是<img id="countryFlag" src = country_flag; />，这里的country_flag是未定义的变量，会导致页面加载时就显示破碎的图片占位符。

修复：把初始src设为空，加上alt属性提升可访问性：

<img id="countryFlag" src="" alt="Country Flag" />

修正后的关键代码片段 #

personInfo.html 修改后的脚本部分 #

<div class="block">
<label>Some facts about country: </label>
<img id="countryFlag" src="" alt="Country Flag" />
</div>
<script>
var personInfoList = JSON.parse(sessionStorage.getItem("newList1"));
for(let item of personInfoList) {
    document.getElementById("displayName").innerHTML = item[0] + " " + item[1];
    document.getElementById("birthdate").innerHTML = item[2];
    document.getElementById("country").innerHTML = item[3];
    
    // 直接生成正确的国旗URL并设置
    const flagUrl = `https://www.countryflags.io/${item[3]}/shiny/64.png`;
    const flagImg = document.getElementById("countryFlag");
    flagImg.src = flagUrl;
    
    // 可选：添加错误监听，当国家名称/代码无效时显示占位图
    flagImg.addEventListener('error', function() {
        this.src = 'https://www.countryflags.io/unknown/shiny/64.png';
    });
}
</script>

add_name.html 额外小修复 #

你在获取历史数据时用了localStorage.getItem("newList1")，但存储时用的是sessionStorage.setItem，这会导致页面刷新后数据丢失。建议统一存储方式，把localStorage.getItem改成sessionStorage.getItem：

function passVal() {
    var prevValue = sessionStorage.getItem("newList1"); // 这里改成sessionStorage
    var newList = prevValue ? JSON.parse(prevValue) : [];
    var newFirstName = document.getElementById("firstname").value;
    var newLastName = document.getElementById("lastname").value;
    var newBirthday = document.getElementById("birthday").value;
    var newCOO = document.getElementById("countryOfOrigin").value;
    newList.push([newFirstName, newLastName, newBirthday, newCOO]);
    sessionStorage.setItem("newList1", JSON.stringify(newList));
}

额外提示 #

countryflags.io的API支持ISO 3166国家代码（如US、CN）或标准英文国家名称（如United States），如果用户输入的是其他格式（比如中文名称），可能还是会加载失败。可以在输入页面提示用户输入正确的国家代码或英文名称。

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