How to remove hash from Image URl Gatsby

Question

Well, I have build my Gatsby website and facing a problem with Image. It's generating a hash at the end of image file name.

/static/imagename-719331c87d42041b22e62a63d9af6e69.webp

Code:

    import Img1 from '../images/image.webp';
   .........
......
...........
     <picture>
           <source srcSet={Img1} />
           <img src={Img1} alt="alt" loading="lazy" height="500px" width="800px"/>
     </picture>

How i can overcome the problem.

Second thing is: i am not deploying my public folder to netlify. Is it necessary to push the public folder to github? so netlify will get it? Each time i push my site to github and netlify reupload the all files.

score 0 · Answer 1 · answered Nov 13 '20 at 05:38

How I can overcome the problem.

If your image's weight is less than 10,000 bytes, Gatsby will return a Data URI instead of the path. According to the documentation of the static folder:

To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path. This applies to the following file extensions: svg, jpg, jpeg, png, gif, mp4, webm, wav, mp3, m4a, aac, and oga.

Try changing it to another format.

The second thing is: I am not deploying my public folder to Netlify. Is it necessary to push the public folder to Github? so Netlify will get it? Each time I push my site to GitHub and Netlify reupload the all files.

Of course not. You should not publish your /public folder since it will be created by Netlify (or your deploy system) in each build/deploy. It would be a waste of MB.

How to remove hash from Image URl Gatsby

1 Answers1

Linked