gatsby: Importing image into file throws error

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® Core™ 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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 15 (8 by maintainers)

Most upvoted comments

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/,
        },
      },
    }

+68

mwood23 on May 31, 2019

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.

bhavikji on Feb 27, 2020

@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

jonniebigodes on Apr 5, 2019

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

jonniebigodes on Apr 5, 2019