代码的目标是从数组中获取用户输入的国家/地区，即 Item[4]，将国家/地区附加到 url，然后使用请求从该 url 获取图像。我假设我需要使用 img src 在我的网站上显示图像。我做错了什么吗？我什么也没看到。另外，我正在尝试使用 javascript 来完成此任务。谢谢! API:https://www.countryflags.io
personInfo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Person Information Page </title>
<style>
h2{
text-align: center;
}
label {
display: inline-block;
width: 150px;
text-align: left;
}
</style>
</head>
<body>
<p style="text-decoration: underline;"><a href=http://127.0.0.1:5000/> Back to home </a></p>
<h2 id="displayName" ></h2>
<div class="block">
<label>Born on: </label>
<p id="birthdate"></p>
</div>
<div class="block">
<label>Born in the country: </label>
<p id="country"></p>
</div>
<div class="block">
<label>Some facts about country: </label>
<img id="countryFlag" src = 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];
const request = new Request('https://www.countryflags.io/{}/shiny/64.png'.format(item[4]), method: 'GET');
const URL = request.url;
fetch(request)
.then(response => {
if (response.status === 200) {
country_flag = 'https://www.countryflags.io/{}/shiny/64.png'.format(item[4]);
document.getElementById("countryFlag").src = country_flag;
return response.json();
} else {
throw new Error('Something went wrong on api server!');
}
})
.then(response => {
console.debug(response);
// ...
}).catch(error => {
console.error(error);
});
//request.args.get(country_flag);
}
</script>
</body>
</html>
add_name.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Add Name Page </title>
<style>
body {
text-align: center;
}
form {
position:relative;
top:20px;
display: inline-block;
}
label {
display: inline-block;
width: 150px;
text-align: left;
}
p {
position: relative;
top: -43px;
left: 410px;
}
</style>
{% extends "navigation.html" %}
{% block content %}
</head>
<body>
<form action="home.html" >
<div class="block">
<label>First name: </label>
<input type='text' input name='firstname' id='firstname'>
</div>
<div class="block">
<label>Last name: </label>
<input type='text' input name='lastname' id='lastname'>
</div>
<div class="block">
<label>Birthday: </label>
<input type='text' input name='birthday' id='birthday' placeholder="mm/dd/yyyy">
</div>
<div class="block">
<label>Country of Origin: </label>
<input type='text' input name='countryOfOrigin' id='countryOfOrigin'>
</div>
<p>
<input type="button" id="add" value="Submit" onclick= "passVal(); window.location.href = '/';">
</p>
</form>
<script>
function passVal() {
var prevValue = localStorage.getItem("newList1");
var newList;
if(prevValue) {
newList = JSON.parse(prevValue);
} else {
}
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)); }
</script>
</body>
{% endblock %}
</html>
最佳答案
试试这个:
personInfo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Person Information Page </title>
<style>
h2{
text-align: center;
}
label {
display: inline-block;
width: 150px;
text-align: left;
}
</style>
</head>
<body>
<p style="text-decoration: underline;"><a href=http://127.0.0.1:5000/> Back to home </a></p>
<h2 id="displayName" ></h2>
<div class="block">
<label>Born on: </label>
<p id="birthdate"></p>
</div>
<div class="block">
<label>Born in the country: </label>
<p id="country"></p>
</div>
<div class="block">
<label>Some facts about country: </label>
<img id="countryFlag" src = 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];
country_flag = `https://www.countryflags.io/${item[3]}/shiny/64.png`;
document.getElementById("countryFlag").src = country_flag;
}
</script>
</body>
</html>
add_name.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Add Name Page </title>
<style>
body {
text-align: center;
}
form {
position:relative;
top:20px;
display: inline-block;
}
label {
display: inline-block;
width: 150px;
text-align: left;
}
p {
position: relative;
top: -43px;
left: 410px;
}
</style>
{% extends "navigation.html" %}
{% block content %}
</head>
<body>
<form action="home.html" >
<div class="block">
<label>First name: </label>
<input type='text' input name='firstname' id='firstname'>
</div>
<div class="block">
<label>Last name: </label>
<input type='text' input name='lastname' id='lastname'>
</div>
<div class="block">
<label>Birthday: </label>
<input type='text' input name='birthday' id='birthday' placeholder="mm/dd/yyyy">
</div>
<div class="block">
<label>Country of Origin: </label>
<input type='text' input name='countryOfOrigin' id='countryOfOrigin'>
</div>
<p>
<input type="button" id="add" value="Submit" onclick= "passVal(); window.location.href = '/';">
</p>
</form>
<script>
function passVal() {
var prevValue = localStorage.getItem("newList1");
var newList = []
if(prevValue) {
newList = 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)); }
</script>
</body>
{% endblock %}
在 add_name.html 中，我更改了“var newList;”到“var newList = []”。
在personInfo.html中，不需要获取图像，只需将图像路径分配给src即可。
关于javascript - 如何使用javascript中的request从网站/api获取图像并在html中使用img src显示它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61299581/