React Chapter Issue - imagesAugust 25, 2018 at 3:15am
I'm really loving this section on React and I'm slowly starting to grasp some of the concepts. However I'm stuck on the chapter with the Components and Props. Background images and the pages were rendering fine until I got to this chapter. Now I'm get the following errors:
ERROR Failed to compile with 2 errorserror in ./static/images/logo-figma.pngModule build failed: Error: emitFile is required from module system at Object.module.exports (/Users/millennium-falcon/Web Dev/my-app/node_modules/file-loader/index.js:9:27)at Object.loader (/Users/millennium-falcon/Web Dev/my-app/node_modules/url-loader/dist/index.js:76:19)@ ./src/pages/index.js 110:54-99
I tried the static images folder location. I tried installing url-loader but I get this message:
[email protected] /Users/millennium-falcon/Web Dev/my-app└── UNMET PEER DEPENDENCY [email protected]^4.0.0npm WARN [email protected] requires a peer of [email protected]^2.0.0 || ^3.0.0 || ^4.0.0 but none was installed.
Any ideas? I'd like to complete the React section.
August 28, 2018 at 2:20am
August 28, 2018 at 7:44pm
I ran across the same issue with an SVG, even after trying several different methods to compress it. The only workaround I could find was to create a
staticfolder at the root of my project, save the image there, and then reference it in CSS as
myImage.svg(it's copied right into the root of the project).
August 29, 2018 at 5:50pm
So there are a few solutions to this. The best one is that with Gatsby, you don't need to use require because all images stored in /static/images will be automatically put in the /public folder, which means you can just link to those images as you would from a hosted website: "/images/logo-figma.png"
The easiest solution which requires upload is to put the image somewhere on the web, using services like CloudApp. Make sure to Copy the download link: eg: "https://cl.ly/3E3D3l3f2A47/download/Ad-800-3.jpg"
The other solutions are listed at the bottom of this page: https://github.com/mengto/my-react-app
September 10, 2018 at 10:46am
September 15, 2018 at 4:49pm
September 17, 2018 at 3:32pm
September 23, 2018 at 9:05am
I am still getting the same error that got. Did 's answer worked for you? No images are shown up. url('../images/wallpaper3.jpg'); gets me this error
Module build failed: Error: emitFile is required from module system.
And url('/images/wallpaper3.jpg') compiles successfully but no images are shown :(
September 25, 2018 at 1:07pm
's answer did work for me. I put all my image files outside of the
srcfolder into a
staticfolder and referenced them with
<img src="/images/photo.jpg" />in source files and
This documentation page helped me: https://v1.gatsbyjs.org/docs/adding-images-fonts-files/
And here is my repo if you'd like to see how I did it: https://github.com/alexismo/design-code-react
October 1, 2018 at 5:51pm
Also, the AppCloud returns with the same issue. No image loading at all
getting the sense that the course may be out of date. Gatsby updated and am noticing a few differences in the naming and code (e.g. components/index.css has been named to layout.css and the code within it has changed)
October 2, 2018 at 8:27pm
Gatsby 2.0 just dropped last week and we updated the course so that it points to the 1.0 template. Everything will work as shown in the videos/text. For the images, please make sure to put the image files in
/static/imagesand link using
October 3, 2018 at 5:14pm
Thanks for the reply . Do you have any idea when you will update the course to work with Gatsby 2? I can imagine as people begin using the course, they'll dig into the first video install Gatsby 2 and similar to me, not know why things aren't quite working.
June 26, 2019 at 1:12pm
July 6, 2019 at 7:37pm
Hey - we are planning on launching React for Designers v2. This will include Gatsby 2. Exact launch date TBA.
July 15, 2019 at 8:01pm
July 16, 2019 at 8:29pm
February 19, 2021 at 3:39am
any solution to this.
without using urls for images