Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug(gatsby-strapi-source): With external and Strapi images in Markdown, some Strapi images are missing/blended #425

Open
hrenaud opened this issue Apr 16, 2023 · 1 comment
Labels
bug Something isn't working

Comments

@hrenaud
Copy link

hrenaud commented Apr 16, 2023

Describe the bug

When I add some images in a Markdown field in Strapi, if I use external images (https://domain.tld/image.png) and Strapi images, the medias array doesn't contain / blend data for some images.

To Reproduce

Copy/adapt this snippet into your richtext.

## External image
![Internet img](https://raw.githubusercontent.com/NovaGaia/strapi-plugin-mock-datas/main/docs/Capture-2023-04-15-102849.png)

## Strapi Image
![Strapi img 1](/uploads/Capture_d_ecran_2022_10_22_192013_1_f3850ccdca.png)

![Strapi img 2](/uploads/lac_1_ceb35aeb78.png)

Result of medias

[
    {
        "alternativeText": "Internet img",
        "file": {
            "alternativeText": ""
        },
        "localFile": {
            "childImageSharp": {
                "gatsbyImageData": {
                    "layout": "constrained",
                    "backgroundColor": "#384868",
                    "images": {
                        "fallback": {
                            "src": "/static/cc395cbe6efc81c57d440d2c13c94fda/e2861/Capture_d_ecran_2022_10_22_192013_1_f3850ccdca.png",
                            "srcSet": "/static/cc395cbe6efc81c57d440d2c13c94fda/13424/Capture_d_ecran_2022_10_22_192013_1_f3850ccdca.png 256w,\n/static/cc395cbe6efc81c57d440d2c13c94fda/37319/Capture_d_ecran_2022_10_22_192013_1_f3850ccdca.png 512w,\n/static/cc395cbe6efc81c57d440d2c13c94fda/e2861/Capture_d_ecran_2022_10_22_192013_1_f3850ccdca.png 1023w",
                            "sizes": "(min-width: 1023px) 1023px, 100vw"
                        },
                        "sources": [
                            {
                                "srcSet": "/static/cc395cbe6efc81c57d440d2c13c94fda/0c128/Capture_d_ecran_2022_10_22_192013_1_f3850ccdca.webp 256w,\n/static/cc395cbe6efc81c57d440d2c13c94fda/5d10f/Capture_d_ecran_2022_10_22_192013_1_f3850ccdca.webp 512w,\n/static/cc395cbe6efc81c57d440d2c13c94fda/b724a/Capture_d_ecran_2022_10_22_192013_1_f3850ccdca.webp 1023w",
                                "type": "image/webp",
                                "sizes": "(min-width: 1023px) 1023px, 100vw"
                            }
                        ]
                    },
                    "width": 1023,
                    "height": 575
                }
            }
        },
        "src": "https://raw.githubusercontent.com/NovaGaia/strapi-plugin-mock-datas/main/docs/Capture-2023-04-15-102849.png",
        "url": "https://raw.githubusercontent.com/NovaGaia/strapi-plugin-mock-datas/main/docs/Capture-2023-04-15-102849.png"
    },
    {
        "alternativeText": "Strapi img 1",
        "file": {
            "alternativeText": null
        },
        "localFile": {
            "childImageSharp": {
                "gatsbyImageData": {
                    "layout": "constrained",
                    "backgroundColor": "#f8f8f8",
                    "images": {
                        "fallback": {
                            "src": "/static/5c012d011772fa184e4d1bc971ecf887/cd293/lac_1_ceb35aeb78.png",
                            "srcSet": "/static/5c012d011772fa184e4d1bc971ecf887/78e2e/lac_1_ceb35aeb78.png 256w,\n/static/5c012d011772fa184e4d1bc971ecf887/90381/lac_1_ceb35aeb78.png 512w,\n/static/5c012d011772fa184e4d1bc971ecf887/cd293/lac_1_ceb35aeb78.png 1023w",
                            "sizes": "(min-width: 1023px) 1023px, 100vw"
                        },
                        "sources": [
                            {
                                "srcSet": "/static/5c012d011772fa184e4d1bc971ecf887/344d9/lac_1_ceb35aeb78.webp 256w,\n/static/5c012d011772fa184e4d1bc971ecf887/e0e76/lac_1_ceb35aeb78.webp 512w,\n/static/5c012d011772fa184e4d1bc971ecf887/f7bc7/lac_1_ceb35aeb78.webp 1023w",
                                "type": "image/webp",
                                "sizes": "(min-width: 1023px) 1023px, 100vw"
                            }
                        ]
                    },
                    "width": 1023,
                    "height": 682
                }
            }
        },
        "src": "/uploads/Capture_d_ecran_2022_10_22_192013_1_f3850ccdca.png",
        "url": "http://localhost:1337/uploads/Capture_d_ecran_2022_10_22_192013_1_f3850ccdca.png"
    }
]

Expected behavior

I'm waiting for an array with 3 images, with data who aren't blended.

System Info

Please provide information about your site via these means as possible:

  • Run: yarn gatsby info --clipboard in your project directory
System:
    OS: Linux 6.1 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 16.14.0 - /tmp/yarn--1681645892480-0.5793483802096153/node
    Yarn: 1.22.19 - /tmp/yarn--1681645892480-0.5793483802096153/yarn
    npm: 8.3.1 - /usr/local/share/nvm/versions/node/v16.14.0/bin/npm
  npmPackages:
    gatsby: ^4.6.1 => 4.25.6
    gatsby-plugin-image: ^2.6.0 => 2.25.0
    gatsby-plugin-manifest: ^4.2.0 => 4.25.0
    gatsby-plugin-matomo: ^0.11.0 => 0.11.1
    gatsby-plugin-mdx: ^3.2.0 => 3.20.0
    gatsby-plugin-meta-redirect: ^1.1.1 => 1.1.1
    gatsby-plugin-postcss: ^5.2.0 => 5.25.0
    gatsby-plugin-purgecss: ^6.1.0 => 6.2.1
    gatsby-plugin-react-helmet: ^5.2.0 => 5.25.0
    gatsby-plugin-robots-txt: ~1.7.1 => 1.7.1
    gatsby-plugin-schema-snapshot: ^3.24.0 => 3.25.0
    gatsby-plugin-sharp: ^4.6.0 => 4.25.1
    gatsby-plugin-sitemap: ^5.2.0 => 5.25.0
    gatsby-plugin-tailwindcss: ^1.0.3 => 1.0.3
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.30 => 1.1.30
    gatsby-source-filesystem: ^4.2.0 => 4.25.0
    gatsby-source-strapi: ^3.2.0 => 3.2.0
    gatsby-transformer-remark: ^5.6.0 => 5.25.1
    gatsby-transformer-sharp: ^4.6.0 => 4.25.0
  • Provide a link to a repository if it is publicly available
    I can't share, it's a private repository.
@hrenaud hrenaud added the bug Something isn't working label Apr 16, 2023
@soichiro0210
Copy link

This may be slightly different from this issue, but in my case, I found that when I created a component that contained media type, the contents were not fetched.
For components that do not contain media type, there was no problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants