Gatsby: Importing image into file throws error

[d-ivashchuk]

Summary

I am trying to import a pattern image into global.js file where I want to use it with styled components. When I try to use standard import pattern from '../assets/x.jpg' I think I get a webpack error:

✖ ｢wdm｣:
ERROR in ./src/assets/x.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/pages/index.js 8:0-38
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ ｢wdm｣: Failed to compile.

Maybe I am missing something, but url-loader seems to be present in node-modules and I've already tried to delete them and reinstall again. I have tried it with .jpg, .png and it's not working.

Environment (if relevant)

System:
OS: macOS Sierra 10.12.6
CPU: x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.13.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 71.0.3578.98
Firefox: 63.0.1
Safari: 12.0.2
npmPackages:
gatsby: ^2.0.53 => 2.0.53
gatsby-image: ^2.0.20 => 2.0.20
gatsby-plugin-layout: ^1.0.10 => 1.0.10
gatsby-plugin-manifest: ^2.0.9 => 2.0.9
gatsby-plugin-offline: ^2.0.16 => 2.0.16
gatsby-plugin-react-helmet: ^3.0.2 => 3.0.2
gatsby-plugin-react-svg: ^2.0.0-beta1 => 2.0.0-beta1
gatsby-plugin-sharp: ^2.0.17 => 2.0.17
gatsby-plugin-styled-components: ^3.0.4 => 3.0.4
gatsby-source-contentful: ^2.0.20 => 2.0.20
gatsby-source-filesystem: ^2.0.8 => 2.0.8
gatsby-transformer-sharp: ^2.1.8 => 2.1.8
npmGlobalPackages:
gatsby-cli: 2.4.3

[LekoArts]

Do you have a link to a repository or can share your code?

[d-ivashchuk]

Hey! sure thing, here is the commit with not working imports. Thanks for help!

https://github.com/d-ivashchuk/peacebot/commit/b67ab72bd8ff42674f6767dd3b058085b75654c0

[sidharthachatterjee]

@d-ivashchuk We've set url-loader's limit option to 10000 bytes (10kb). We do this to set a good default limit. The files you are trying to import are over a MB.

Remember files handled by this are base64 encoded and add to the size of your bundle.

Might I recommend using gatsby-image?

[d-ivashchuk]

Hmm, I didn't know that, thanks! I would like to use image as a background for the website and wasn't sure that gatsby-image is the best option for this. Anyways thanks for pointing out, I will try to do it with Img

[sidharthachatterjee]

gatsby-image is great because you get a bunch of stuff for free including

• ability to resize images
• lazy load them
• generate blurred versions while the actual image downloads

Closing this issue in the mean time but please feel free to comment or reopen if there is anything else!

[theofromthelabo]

Dear guys -

I got a similar error message and couldn't resolve it with the instructions as above.

Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

Pretty new at using React and Gatsby
When running a gatsby develop, but I got the error as above for all the images in the directory /src/assets/images/

Here is repository: https://github.com/theofromthelabo/thelabo

How can I resolve the issue?

Let me know if you need further info to replicate the issue.

Thank you in advance and have a good day.

[jonniebigodes]

@theofromthelabo i picked up on your comment and i've cloned your provided repo and i only found a issue with it. And that's you have added gatsby-plugin-react-svg to gatsby-config.js and you don't have it installed, this based on your package.json.
Commenting out that entry and issuing gatsby develop your site builds fine. And the images are being loaded without any issue. Tested it out by opening up each page you have and all of them showed the images.
Also took it a step further and issued a production build with gatsby build && gatsby serve and i got the same result.

If you don't mind, i would like to offer you some advice when you submit a reproduction to here, or a diferent place. In your project root folder add a file called .gitignore with the contents like this.

[theofromthelabo]

@jonniebigodes ohww
thank for the fast and useful answer
it resolved the issue and I added .gitignore - YEAH !

here is my commit: https://github.com/theofromthelabo/thelabo/commit/495b61b409a3f456e0a2749e61dc10a2224ff657

Thank you again ! have a good day !

[jonniebigodes]

@theofromthelabo no problem,there's no need to thank, glad i could be of assistance and helped out solving your issue. Have good day aswell

[mwood23]

Just ran into this error and it was because of gatsby-plugin-react-svg and my SVGs living in the same folder as .png and .jpg files. To fix, I separated them out so my folder structure looks like this.

/assets
  /images (for pngs and jpgs)
  /svgs

gatsby-config.js

    {
      resolve: 'gatsby-plugin-react-svg',
      options: {
        rule: {
          include: /svgs/,
        },
      },
    }

[Helloiain]

@mwood23 wow I never would have thought about that. Thanks that fixed it for me.

[bhavikji]

Just ran into this error and it was because of gatsby-plugin-react-svg and my SVGs living in the same folder as .png and .jpg files. To fix, I separated them out so my folder structure looks like this.

/assets
  /images (for pngs and jpgs)
  /svgs

gatsby-config.js

    {
      resolve: 'gatsby-plugin-react-svg',
      options: {
        rule: {
          include: /svgs/,
        },
      },
    }

@mwood23 :
I have followed the same folder structure as mentioned.

/static
   /assets
      /images
      /svgs

and here is my gatsby config.js

{
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static/assets/images`,
        name: 'assets',
      },
},
{
      resolve: 'gatsby-plugin-react-svg',
      options: {
        rule: {
          include: /svgs/,
        },
      },
},

But this isn't working for me.