React Chapter Issue - images
August 25, 2018 at 3:15amReact Chapter Issue - images
August 25, 2018 at 3:15amI'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.npm WARN [email protected] requires a peer of [email protected]^4.0.0 but none was installed.npm WARN [email protected] requires a peer of [email protected]^6.0.0 but none was installed.
Any ideas? I'd like to complete the React section.
Thank you
August 28, 2018 at 2:20am
I had this issue as well. Just pass the images through https://tinypng.com/ and compress it. For some odd reason, when you export it from Sketch/Framer, Gatsby does not seem to like it.
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
static folder 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
src folder into a static folder and referenced them with <img src="/images/photo.jpg" /> in source files and url('/images/watertown.jpg'); in CSS.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
did your images not show up at any point? Stuck at chapter 2 right now
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/images and link using image="/images/image.jpg"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