Gatsby: Support for png images

[hsribei]

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!

[KyleAMathews]

Looks like a package didn't install correctly. You could try deleting
node_modules and rerunning npm install.

On Sat, Mar 25, 2017, 12:05 PM Helder S Ribeiro [e-mail]
wrote:

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!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/756, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEVhzH4F1TTeuE24KVMzQ7utNMQZivuks5rpUlZgaJpZM4MpI_h
.

[hsribei]

I tried that, got the same error. Let me know if I can help with more information in case you want to track this. If it seems like I'm the only person having this trouble then no need to worry as I've "solved" it by using a jpg. Thanks for Gatsby btw :)

[KyleAMathews]

Have you tried googling the error?

On Sat, Mar 25, 2017, 3:32 PM Helder S Ribeiro [e-mail]
wrote:

I tried that, got the same error. Let me know if I can help with more
information in case you want to track this. If it seems like I'm the only
person having this trouble then no need to worry as I've "solved" it by
using a jpg. Thanks for Gatsby btw :)

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/756#issuecomment-289237681,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEVh2d7gFA42LvgVrhk_kd5K9WngBxlks5rpXnGgaJpZM4MpI_h
.

[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.

[KyleAMathews]

Seems like it's a problem with the upstream package https://github.com/tcoopman/image-webpack-loader/issues/51

[KyleAMathews]

Closing as it's an upstream issue.

[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`,
      },
    },