after gatsby build the images in strapiArticle.content doesn't reference a local file

[giacomocerquone]

Hi everyone.
I'd like to know if it's a missing feature or I'm doing something wrong.

If I require an image from a graphql query like this:

  strapiArticle(strapiId: { eq: $id }) {
      strapiId
      title
      published_at
      image {
        publicURL
      }
    }

The image.publicURL file gets copied inside the public folder resulted from the gatsby build command.
But if I put images inside my article content and require it like this:

  strapiArticle(strapiId: { eq: $id }) {
      content
    }

After a gatsby build the images doesn't get copied inside the build and if the strapi server is shut down, referencing the image in the gatsby article page gives back a 404.

My use case, clearly, is to not host strapi online and use it as an offline cms for my gatsby blog so I need to have all the files inside the gatsby resulting build.

[meinvolk]

@giacomocerquone The image.PublicURL file does not get copied to the public folder because gatsby build. Public URL get copied from strapi to strapi public folder. The reason you are getting a 404 is because Gatsby does not know where the images/strapiImage file is located. A workaround would be to use the absolutePath property for the image.

Or the correct way, and one I recommend is the following. This plugin will generate childImageSharp nodes, which are files generated in Gatsby from the sourced Strapi data. To access that it would look like this.

strapiArticle(strapiId: { eq: $id }) {
      strapiId
      title
      published_at
      image {
        childImageSharp{
            fixed{
              src
            }
          }
      }
    }

Docs on Gatsby Images

[giacomocerquone]

@meinvolk I can't do that query in an image placed inside a markdown content that I find inside the content property of an article node, so?

You just referred as the correct way my first example which is not the case when retrieving images inside markdown content

[giacomocerquone]

I'd like to have this https://www.gatsbyjs.org/docs/working-with-images-in-markdown/#using-the-transformer-remark-plugin

but for the gatsby-source-strapi since we can't use gatsby-transformer-remark

[meinvolk]

This plugin does not currently support transforming images contained in markdown to graph nodes. A plugin like gatsby-remark-images takes actual .MD files from the source code to generate image nodes. This request would be a great addition to the plugin.

I don't think gatsby-source-graphql would support what you are asking either, but I have not tried it. I can suggest that you use a package like react-markdown and just render the content in the markdown. That package will take the URL of the image and display it. It won't be able to use gatsby-image, but is a solution to your problem. Best of luck!

[giacomocerquone]

I understand your technical point of view and I respect that, but not everything should be hard.
I was suspicious in fact that issues like #5 were linked to this.
Anyway, I believe I have a simpler solution, at least for this issue.

I've tested it and it works. Considering that when you upload an image into strapi and click on it in the admin panel to get the url back, strapi gives you a relative link like this: /uploads/71ac942d097445b58b9b29116c7abd3e.jpg

Now when we then build gatsby, as we know, it will use, as basename, the URL set in the options object under the apiURL key:

 options: {
        apiURL: process.env.API_URL || "http://localhost:1337",

Now copying the entire uploads folder from strapi to the gatsby public folder will allow us to make this work. We just need to change the apiURL field to the URL where the gatsby build is hosted.

So, should we do this manually through the npm build script of gatsby or we can integrate this change in the plugin?

[meinvolk]

At a first glance I think this can all be done in the plugin. We are already downloading media files in the normalize.js file. There is a lot of info in ticket #5 that proves a great starting point. If you have time fork the repo and push a branch so we can make some progress. I just finished a PR for supporting Single Types and would like to keep contributing. I initially didn't understand what you were asking, but now I am with you.

[giacomocerquone]

@meinvolk I'll make a PR asap, slightly saw the code of this plugin, so do you confirm me that to "copy over" all the uploads folder the approach is to issue a fetch call to the strapi webserver?
Thanks

[unagigd]

@giacomocerquone I've added the #122 PR which, I think, is solving your requirement as well.