时间戳

首页 > 解决方案 > 如何在 reactJS 中获取正文中的图像

javascript - 如何在 reactJS 中获取正文中的图像

问题描述

在后端，我有一个 API 将图像发送到正文

@GetMapping(value = "/image/{name}")
public ResponseEntity<InputStreamResource> getImage(@PathVariable("name") String name) throws IOException {
    InputStream inputStream = newsService.getInputStream(name);
    return ResponseEntity
            .ok()
            .contentType(MediaType.IMAGE_PNG)
            .body(new InputStreamResource(inputStream));
}

我只是显示来自 JSON 文件的数据，我从未显示来自正文的图像。所以每个人都可以帮助我如何显示我从后端发送的图像。这是我的前端代码：

const responseImage = await fetch(`http://localhost:8080/news/image/${image_name}`, {
        method: "get",
        mode: "cors",
        headers: {
          'Content-Type': 'image/png',
          'Access-Control-Allow-Origin': '*',
        },
      })
      const responseData = await responseImage
      this.state.image.push(responseData)

非常感谢！！！

标签： javascriptjavareactjs

解决方案

您使用的支持我不熟悉，但您可以做的只是将位于服务器中的图像的图像 url 返回到前端，就像反应一样，您可以在 componentdidmount 中调用 api。然后您可以通过 <img src={imageurlreturn[enter image description here][1] from server}/> 轻松访问

希望对你有帮助……[1]：https ://i.stack.imgur.com/W1CPV.png

推荐阅读