Javascript URL获取'；当React尝试渲染图标时，图标已损坏

伙计们，我目前正在开发一个天气应用程序，我在一个远程位置上有一堆图标，我必须渲染它们。 我有一个函数，它可以访问API，返回未来5天的预测。在那块数据中，我还有图标“0d”、“1d”等的名称。我试图做的是将图标名称注入到我正在使用的API中。当我在控制台上记录我创建的链接时，一切看起来都很好，但是当我点击链接时，我得到的是类似于“https://openweathermap.org/img/wn/10d.png%E2%80%8B”的东西，它在进行调用时总是添加那些尾随字符，我不知道为什么会发生这种情况

我将在下面发布我的代码，这样你们就可以看到了

import React from "react";

export const NextDaysWeatherForecast = (props) => {
const { nextDaysWeather } = props;
var auxIndex = 0;
var icon;

return (
    <div>
        {nextDaysWeather.map((days, index) => {
            if (auxIndex < nextDaysWeather.length) {
                let requiredDay = nextDaysWeather[auxIndex];
                auxIndex = auxIndex + 8;
                icon = requiredDay.weather[0].icon;
                let iconAPI = `http://openweathermap.org/img/wn/${icon}.png​`; // I have used string literals to inject the variable
                console.log(iconAPI); // this prints correctly to the console
                return (
                    <div key={index}>
                        <span>def</span>
                        <span>{requiredDay.main.temp}&deg;C</span>
                        <span>{requiredDay.weather[0].description}</span>
                        <img src={iconAPI}></img>// however the image is not displayed
                    </div>
                );
            }
        })}
    </div>
);
};

从“React”导入React；
导出const NextDaysWeatherForecast=（道具）=>{
const{nextDaysWeather}=道具；
var生长素指数=0；
var图标；
返回(
{nextDaysWeather.map（（天，索引）=>{
if（生长素指数<下一天出汗长度）{
let requiredDay=下一天出汗[生长素指数]；
生长素指数=生长素指数+8；
icon=requiredDay.weather[0]。icon；
让iconAPI=`http://openweathermap.org/img/wn/${icon}.png​`; // 我使用了字符串文字来注入变量
console.log（iconAPI）；//这将正确打印到控制台
返回(
def
{requiredDay.main.temp}°；C
{requiredDay.weather[0].description}
//但是，不显示图像
);
}
})}
);
};

在

png

中的

g

之后和反勾号之前，URL中隐藏着一个零宽度的空格<代码>%E2%80%8B是零宽度空间（）的UTF-8编码。

哇，好的，谢谢。所以我想我可以只做iconAPI.trim（）并删除尾随的空格？最好在源代码中删除零宽度的空格。

.trim（）

方法不会修剪零宽度空格。但是在我的源代码中，我实际上看不到尾随空格，或者我可以吗？我错过什么了吗？当我检查源代码时，我的链接看起来很好。不，你看不到零宽度空间，因为它的宽度为零。看起来它不在那里，但它在那里。我已经尝试过类似这样的iconAPI.replace（/\u200B/g，“”）；但这没用