React组件中img标签src属性URL如何传参及解决invalid src报错

错误原因 #

你在给<img>的src属性赋值时，直接传入了readySRC函数本身，而src仅支持接收字符串格式的图片链接，接收函数类型值时就会触发invalid src报错。同时readySRC是需要传入city参数才能正常生成链接的函数，未传参直接调用也会得到无效值。

解决方法 #

调用readySRC函数并传入对应的城市参数，拿到生成后的URL字符串再赋值给src即可。同时建议给cityToCodeMatcher增加默认返回值，避免未匹配到城市时生成无效链接。

修正后的代码示例 #

import React, {useState,useEffect} from 'react';

// 此处保留你的其他业务逻辑

const cityToCodeMatcher = (city) => {
    let code;
    if(city === "Kolkata") code='IN';
    else if(city === "Tokyo") code='JP';
    // 增加兜底逻辑，避免未匹配城市时返回undefined
    else code = 'default';
    return code;
}

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

return(
    <>
    <div className="timezone">       
       <div>
            {/* 调用readySRC并传入你组件内对应的城市变量即可，示例中city为你业务中存储的城市状态参数 */}
            <img src={readySRC(city)} alt="Country flags"/>
        </div>
    </div>
    </>
);

}
export default TimeZoneComponent;

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