想要在 ReactJS 的 <img> src 属性 URL 中传递参数？

Question

我想在 react 组件中的 <img> 的 src 属性的 URL 中传递 code 参数。我已经完成了下面的实现，但是它在控制台中显示了无效的 src

import React, {useState,useEffect} from 'react';
import { Button } from 'react-bootstrap';

const TimeZoneComponent = () => {

const [data, setData] = useState([]);
const [city,setCity] = useState('');
const [printCity, setPrintCity] = useState(false);


const clickfn = () =>
{
    setPrintCity(true);
    if(printCity)
    {
        timeZone(city);
    }
}


async function timeZone(city) {
    await fetch(`http://worldtimeapi.org/api/timezone/Asia/${city}`)
    .then((response)=>response.json())
    .then((json)=>{
        //console.log(json);
        setData(json);
    })
}



useEffect(()=> {
        timeZone();
},[])

let mystr = JSON.stringify(data.datetime);

console.log("city typed  =  "+city);

const cityToCodeMatcher = (city) => {
    let code;
    if(city === "Kolkata") code='IN';
    else if(city === "Tokyo") code='JP';
    return code;
}

const readySRC = (city) => {
    let temp =  "https://www.countryflags.io/".concat(cityToCodeMatcher(city));
    return temp.concat("/shiny/64.png");
}



return(
    <>
    <div className="timezone">       
        <div id="timezone-input">
            <label>Type Asian City Here..
                <br/>
            <input type="text" placeholder=" Type city here.." onChange={(event)=>setCity(event.target.value)}/>
                <br/>
            <Button className="timezone-button" onClick={()=>clickfn()} >Get Current DateTime</Button>
            </label>
        </div>
        Date: {mystr?.slice(1,11)} <br/>
        Time: {mystr?.slice(12,20)} <br/>
        Timezone: {data.timezone}
        <div>
            //Here I want to pass parameter in src of<img>
            <img src={readySRC({city})} alt="Country flag"/>
            ///////////
        </div>
    </div>
    </>
);

}
export default TimeZoneComponent;

有人帮忙怎么做吗？

Answer 1

<img src={readySRC({city})} alt="Country flag"/>

readSRC({city}) 表示

readSRC({
   city: city
});

在你的代码中应该是

readSRC(city)