ReactJS:<img/>标签无法从远程URL加载图像,并且无法以404转换提供的URL

时间:2019-01-12 14:06:01

标签: html css reactjs html5

我正在尝试通过以下网址在React Web应用程序中显示图像:http://chittagongit.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格式显示图像,则该图像也会正确显示。不知道这里是什么问题。我也没有找到需要启用或禁用的任何选项(如果有)。 请帮忙。

0 个答案:

没有答案