使用React在网页上显示MockServer返回的图像？

问题描述

我正在使用带有OPEN API 3.0的Mock Server来模拟数据和期望值。我需要根据以下给定示例使用Mock Server提取虚拟图像：

https://www.mock-server.com/mock_server/getting_started.html#button_response_literal_binary_PNG_body

我的swagger / Open API swagger编辑器具有函数定义，如下所示：

/geo/{geo-id}:
    get:
      description: Geographic information
      tags: [caseload]
      parameters:
      - in: path
        name: geo-id
        required: true
        schema:
          type: string
      responses:
        '200':
          description: >
            Sample geographic map image in PNG format
          content:
            image/png:
              schema:
                type: string
                format: binary

使用上面链接中提供的示例REST API示例，我创建了自己的模拟数据期望CURL请求，例如：

curl -v -X PUT "http://localhost:1080/mockserver/expectation" -d '{
  "id": "geo-map","httpRequest": {
    "method" : "GET","path": "/geo/geoid-map"
  },"httpResponse": {
    "statusCode": 200,"headers": {
      "content-type": ["image/png"],"content-disposition": ["form-data; name=\"test.png\"; filename=\"test.png\""]
    },"body": {
      "type": "BINARY","base64Bytes": "iVBORw0KGgoAAAANSUhEUgAAAqwAAAApCAIAAAB/QuwlAAAK+GlDQ1BJQ0MgUHJvZmlsZQAASA2tl3dcU8kWx+fe9EYLICAl9CZIr9JrAAXpYCMkgYQSYgoCVpTFFVwLKiKgrugiiIJrAWQtiAULoljAvkEWFXVdLIiKypvAEvfzPm//e5PP3Pne35w598zcmXzOBYBGZQmFWagKANkCiSg6xJ+RmJTMIDwGWKAF8EAf2LHYYqFfVFQE+NfyoRcg8s5bNnJf/2r2vztUOVwxGwAkCnancsTsbMjHYH3PFookAGDqoG68RCKUcxdkdREMELJMzumT/F7OqROMJU7YxEYHAIDVBYBIZbFE6QBQLaDOyGWnQz/UUMh2Ag5fADkPsjebx+JAboU8Izs7R85/QLZI/Yef9H8wi5Wq8MlipSt4ci5wJHxwIF8szGLlT9z8Py/ZWVK4XhPFEF6pPFFoNGwT4ZpVZ+aEK1iQOidySufDGU0xTxoaN8VscQBcy8mxHFZg+BRLM+P8ppglgvS3DV/CjJ1iUU60wr8ga458f0zEwOMyFcwVB8VM6Wn8YOYUF/BiE6Y4lx8/Z4rFmTGKGAp4AQpdJI1WxJwmClbMMVsMR/79XDbr+7MkvFj5O56Ih8MNDJpiriBOEY9Q4q/....[trimmed]
    }
  }
}'

现在，当我在邮递员上执行请求端点时，

http://localhost:1080/geo/geoid-map，我能够成功获取图像。但是，当在我的React Web应用程序上尝试相同操作时，API返回的响应会生成一个控制台响应：

在展开response.data时，它会显示二进制数据，例如：

将此二进制图像传递到react的src中无法显示该图像。

即使按照how to convert the binary data to image in reactjs和How to display binary data as image in React?中的建议进行配置后，它也不起作用。

任何有关此问题的帮助都将受到赞赏

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）