React+TypeScript中Redux状态传递后图片加载异常求助

你的问题出在图片的src URL缺少协议头（http://），浏览器会把127.0.0.1:8000xxx这类不带协议的地址解析为当前页面的相对路径，导致实际请求的地址完全错误，所以图片加载失败。而你把URL复制到新标签页时，浏览器会自动补全http://协议，因此能正常打开图片。

修复方案 #

直接在URL前添加http://即可：

<img src={`http://127.0.0.1:8000${profileInfo.cover_image}`} id="cover-photo" />

优化建议（生产环境） #

为了避免硬编码地址，建议用环境变量存储API基础地址，比如在项目根目录的.env文件中配置：

REACT_APP_API_BASE=http://127.0.0.1:8000

然后在组件中使用：

<img src={`${process.env.REACT_APP_API_BASE}${profileInfo.cover_image}`} id="cover-photo" />

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