首页 > 解决方案 > ReactJS:标签无法从远程 url 加载图像并转换提供的 url 失败并出现 404

问题描述

我正在尝试通过以下网址在反应网络应用程序中显示图像:http: //chitagongit.com/images/health-icon/health-icon-10.jpg

<div onClick={props.info.itemClicked}>
   <div className={classes.ImageContainer}>
      <img src={imageURI} alt={props.info.keyword} className={classes.Image} />

   </div>
</div>

在记录图像 url 时,它显示正确,但在尝试加载后,它失败并显示 404,并在错误中显示以下 url:

获取http://chittagongit.com/image.php?pic=/images/copy-right-icon/copy-right-icon-16.jpg 404(未找到)

GET http://chittagongit.com/image.php?pic=/images/copy-right-icon/copy-right-icon-16.jpg 404 (Not Found)
Image (async)
setValueForProperty @ react-dom.development.js:3135
setInitialDOMProperties @ react-dom.development.js:7749
setInitialProperties @ react-dom.development.js:7931
finalizeInitialChildren @ react-dom.development.js:9000
completeWork @ react-dom.development.js:16272
completeUnitOfWork @ react-dom.development.js:18573
performUnitOfWork @ react-dom.development.js:18780
workLoop @ react-dom.development.js:18791
renderRoot @ react-dom.development.js:18876
performWorkOnRoot @ react-dom.development.js:19812
performWork @ react-dom.development.js:19722
performSyncWork @ react-dom.development.js:19696
requestWork @ react-dom.development.js:19551
scheduleWork @ react-dom.development.js:19358
enqueueSetState @ react-dom.development.js:12789
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:354
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
e @ VM1643:1
(anonymous) @ index.js:11
dispatch @ redux.js:613
(anonymous) @ projectListActions.js:22
Promise.then (async)
fetchList @ projectListActions.js:19
(anonymous) @ projectListActions.js:12
(anonymous) @ index.js:8
dispatch @ VM1643:1
fetchProjectTrendList @ ProjectListBuilder.js:67
componentDidMount @ ProjectListBuilder.js:26
commitLifeCycles @ react-dom.development.js:16722
commitAllLifeCycles @ react-dom.development.js:18160
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18365
completeRoot @ react-dom.development.js:19894
performWorkOnRoot @ react-dom.development.js:19817
performWork @ react-dom.development.js:19722
performSyncWork @ react-dom.development.js:19696
requestWork @ react-dom.development.js:19551
scheduleWork @ react-dom.development.js:19358
enqueueSetState @ react-dom.development.js:12789
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:354
(anonymous) @ asyncComponent.js:12
Promise.then (async)
componentDidMount @ asyncComponent.js:10
commitLifeCycles @ react-dom.development.js:16722
commitAllLifeCycles @ react-dom.development.js:18160
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18365
completeRoot @ react-dom.development.js:19894
performWorkOnRoot @ react-dom.development.js:19817
performWork @ react-dom.development.js:19722
performSyncWork @ react-dom.development.js:19696
interactiveUpdates$1 @ react-dom.development.js:19984
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5081

该错误仅显示来自该特定域(源)的所有图像。如果我尝试从其他来源获取图像,它会正确显示。尝试使用邮递员检查 url 重定向。但它显示正确,没有任何中间重定向。如果我尝试以纯 html 显示图像,它也会在那里正确显示。不知道这里有什么问题。我也没有找到任何需要启用或禁用的选项(如果有的话)。请帮忙。

标签: cssreactjshtml

解决方案


推荐阅读