CODEWITHSUNDEEP
gatsby
Andrew
Andrew

Reputation: 1575

How to copy images for production from assets to public/assets

I'm using Gatsby + Strpai and I had a problem with images that are inserted into the body content.

To render content I'm using ReactMarkdown and images that are not found in development & production, I solved this problem by replacing path uploads with assets.

<ReactMarkdown transformImageUri={(uri) => uri.startsWith('http') ? uri : `${process.env.BASE_URL}${uri.replace('uploads', 'static')}` }>
  {content}
</ReactMarkdown>

But in production mode, images are still not available since they are not being copied on build time to the public/static folder.

Another workaround for this was to create a static folder at the root of the project and put images there, but they are copied to the public/ instead I want them to be available in public/static

Any way I can achieve this, or maybe you have another suggestion for this kind of problem?

Upvotes: 1

Views: 108

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

Besides the fact that to me it seems a misconfiguration of Strapi source plugin (or the others Gatsby plugins) since the images should be available both in development or build (they should be copied locally to allow Gatsby to create queryable image nodes).

All the solutions that are handled by any component seems an overkill solution to me, a patch that doesn't fix the root of the issue (images not being downloaded locally properly).

Another workaround for this was to create a static folder at the root of the project and put images there, but they are copied to the public/ instead I want them to be available in public/static

If this is a suitable solution for your use case, you can create a /static/static folder structure (in the root of your project) which will be translated as /public/static when the project builds.

Upvotes: 1

Related Questions