Skip to content

feat(gatsby-source-strapi): Transform markdown images in-place #422

@Undistraction

Description

@Undistraction

Is your feature request related to a problem? Please describe.

Usually (when using remark with local markdown files), if an image is encountered in the markdown, gatsby-remark-images transforms that image into html that can then be rendered using GatsbyImage.

For example if the following is encountered in markdown:

[Example alt](../../../static/uploads/example.png)

When I query using htmlAst I get a node back representing the <img> as a picture tag with full sourceset etc. his contains all the necessary formats to be picked up and transformed into a <GatsbyImage />.

However for images inside Markdown content from Strapi, no transformation takes place, and the AST node looks like this. This makes sense as gatsby-remark-images doesn't handle images with remote URLs:

This is an example of an un-replaced image tag in the htmlAst:

 {
  "type": "element",
  "tagName": "img",
  "properties": {
      "src": "/uploads/example_large_3c066db0fa.png",
      "alt": "Example",
      ...
   }
}

This plugin does add a medias node to the markdown field which stores data about the images parsed out of the markdown, but the actual images within the markdown are not updated.

Describe the solution you'd like

I'd like to see images in markdown transformed in-place, as happens to images in markdown for local markdown files. I think the simplest way to do this is to swap out the image URLs with the URLs of the downloaded images.

Describe alternatives you've considered

I don't see any alternative here. The image paths need to be local so that gatsby-remark-images can parse them into the relevant tags.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions