Support for png images

Sorry if this is too newbie a question, but I’ve had the following problem. I created a blog using the official blog starter, then went to replace profile-pic.jpg with a png image. I replace jpg with png in components/Bio.js, deleted the original image and added my own profile-pic.png. That’s all. Then I got this error:

ERROR in ./components/profile-pic.png
Module build failed: Error: /home/hsribei/usr/src/blog/node_modules/pngquant-bin/vendor/pngquant: error while loading shared libraries: libpng12.so.0: cannot open shared object file: No such file or directory

    at Promise.all.then.arr (/home/hsribei/usr/src/blog/node_modules/execa/index.js:201:11)
    at process._tickDomainCallback (internal/process/next_tick.js:135:7)

Is this something that’s missing in the package.json file? For now I just used a jpg image and it worked, but I would like to know how to make a png file work. Thanks!

[hsribei]

Yes. This fixed it for me:

sudo apt-get install libpng-dev
npm rebuild

But I was wondering if this dependency could be installed along with the others.

[rmcsharry]

I just discovered this bug today and the KEY is making sure that the path to your images folder is correct in the gatsby-config (in the plugins array):

My images are in a strange place in the code I inherited!

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },