gatsby-uc / gatsby-uc/plugins

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

Open
#422 1 comment 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
JavaScript
Stars
57
Forks
37
PR merge metrics
No merged PRs in 30d

Description

## 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 `` as a picture tag with full sourceset etc. his contains all the necessary formats to be picked up and transformed into a ``.

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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.