亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何使用javascript中的request從網站/api獲取圖像并在html中使用img src

如何使用javascript中的request從網站/api獲取圖像并在html中使用img src

慕婉清6462132 2024-01-11 17:31:15
代碼的目標是從數組中獲取用戶輸入的國家/地區，即 Item[4]，將國家/地區附加到 url，然后使用請求從該 url 獲取圖像。我假設我需要使用 img src 在我的網站上顯示圖像。我做錯了什么嗎？我什么也沒看到。另外，我正在嘗試使用 javascript 來完成此任務。謝謝！API： https: //www.countryflags.iopersonInfo.html  <!DOCTYPE html>        <html>        <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>        </body>        </html>
查看完整描述

1 回答

?
慕桂英3389331

TA貢獻2036條經驗 獲得超8個贊

試試這個：

personInfo.html


<!DOCTYPE html>

<html>


<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>

添加名稱.html


<!DOCTYPE html>

<html>

<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 即可。


查看完整回答
反對 回復 2024-01-11
  • 1 回答
  • 0 關注
  • 147 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號