Swagger UI does not display image/png content in POST

Question

I have a scenario where POST method returns an "image/png" content. The API works perfectly in Postman and I am able to see an image.

I use Swagger to document my APIs. For some reason "Try out" functionality crashes any POST method which returns an image. It freeze on loading and I see the following in the browser console:

cannot parse JSON/YAML content 
swagger-ui-min-js:14 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
at C.n.showStatus (swagger-ui-min-js:14)
at showCompleteStatus (swagger-ui-min-js:14)
at response (swagger-ui-min-js:9)
at h (swagger-ui-min-js:7)
at t.on.response (swagger-ui-min-js:7)
at swagger-ui-min-js:7
at h.callback (swagger-ui-min-js:13)
at h.<anonymous> (swagger-ui-min-js:13)
at h.r.emit (swagger-ui-min-js:13)
at XMLHttpRequest.n.onreadystatechange (swagger-ui-min-js:13)

Any ideas of how this could be fixed? The API works (at least in Postman), it is just the Swagger UI which seems to have a problem. I installed Swagger via nuget packages Swashbuckle.Core and Swashbuckle version 5.6.0

Answer 1

As was clarified in the comments, M_M originally used Swagger UI 2.x, and the spec looked like this:

paths:
  /api/PngImage:
    post:
      produces:
        - application/json
        - text/json
        - text/html
      responses:
        200:
          description: OK
          schema:
            type: object

There are two issues with the spec:

• The endpoint returns a PNG image, but is said to produce JSON and HTML.
• File responses, including images, should have type: file, not type: object.

In Swagger UI 2.x, the "cannot parse JSON/YAML content" error is caused by wrong produces - UI expects a JSON response but gets a binary response instead. Changing produces to image/png should solve the problem with UI 2.x.

Swagger UI 3.0.19, however, had a different issue - when the response was an image, the UI repeated the request to the same endpoint but using GET in order to display the image instead of rendering the existing response. So if the endpoint did not accept GET, or if GET returned a different image than POST, the original image response was not displayed. HelderSepu reported the double request issue to the Swagger UI developers, and it was fixed in Swagger UI 3.0.20.

Answer 2

The swagger-ui team confirmed that this is a bug only happening on POST:
https://github.com/swagger-api/swagger-ui/issues/3435
As a workaround I recommend you using GET (where possible)

Update (Jul/22)

The swagger-ui team has fixed the bug on version 3.0.20
I incorporated that version into my fork, you can get the latest here:
https://www.nuget.org/packages/Swagger-Net/8.3.0.2001