英文:
Why is the image from my server not shown as source in my image tag?
问题
I'm providing the translated content without the code:
目前，我正在尝试在我的React应用程序中显示我从API提供的图像。
然而，图像在前端未显示，我只看到一个损坏的图像图标。
文件从API发送如下：
图像标签在我的前端看起来像这样：
但是，与我的图像不同，显示的是以下内容：
甚至在我在新标签页中打开图像URL后，它仍然可以正常工作：
因此，我想知道为什么无法加载此文件，我想不出更多的原因了。
显然，图像已经正确发送，否则它不会在新标签页中工作。
我会感激任何帮助！
提前感谢。
英文:
Currently, I am trying to display an image that I provide from my API in my React app.
However, the image is not displayed in the frontend, all I see is a broken image icon.
The file is sent from the API as follows:
router.get("/test", UserController.AuthenticationMiddleware, (req, res, next) => {
res.sendFile(path.join(EnvironmentHelper.ImageStore, "test.jpg"));
});
The image tag in my frontend looks like this:
<img src="http://localhost:3001/test"/>
But instead of my image, this is shown:
The network tab in chrome also shows 200 OK
Even after i open the img url in a new tab, it works:
Therefore, I wonder why this file can not be attracted, I can not think of any more reason here.
The image is obviously sent correctly, otherwise it would not work in the new tab.
I'm grateful for any help!
Thanks in advance.
答案1
得分: 0
我通过在图像标签上提供'crossOrigin'参数来解决了这个问题。
英文:
I solved this problem by providing the 'crossOrigin' parameter on the image tag.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论