menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Design+Code

A place to learn iOS 11 design and code. Some of the topics we focus on are Sketch, SwiftUI, Swift, React, React Native, Vuejs, Figma design system, Framer and Framer Playground, ARKit, SpriteKit, Unity, etc.

Channels
Team

React Chapter Issue - images

August 25, 2018 at 3:15am

React Chapter Issue - images

August 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 errors
error in ./static/images/logo-figma.png
Module 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.0
npm 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
like-fill
1

September 10, 2018 at 10:46am
Hi I am still stuck with this. Can someone help me resolve it with url-loader instead of the static folder solution
Hello Muhammad, can you try the static folder solution, I think will be a better solution and it won't cause you problems in the future, please let me know how it goes

September 15, 2018 at 4:49pm
I've moved all the images to a /static/images folder and am now calling them by doing <img src="../../static/images/logo-sketch.png" width="50" />. Gatsby no longer complains, but the images no longer show up.

September 17, 2018 at 3:32pm
Hey Alexis, since Gatsby automatically put all your static/images to /public, you don't need to do that lengthy image source anymore. Instead, you can put src="/images/logo-sketch.png"
like-fill
1

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.
And here is my repo if you'd like to see how I did it: https://github.com/alexismo/design-code-react
like-fill
1

October 1, 2018 at 5:51pm
Running into the same issue, if I push to either public or static folder, the img doesn't show up
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)
I am able to get other images to load, but the Hero background image will not load AT ALL

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.
We have updated both the videos and text to reflect the need to specify the Gatsby version. We have an active support team that helps all our readers. -- The course will be updated eventually for Gatsby 2, and along with it, a number of improvements and new content.

June 26, 2019 at 1:12pm
Hi ! Is the course updated for Gatsby 2 yet?
like-fill
1

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.
like-fill
2

July 15, 2019 at 8:01pm
Awesome Lauro! Can you please let me know when it is close to launch? Thank you!

July 16, 2019 at 8:29pm
Could you give an example of your code and file structure?

February 19, 2021 at 3:39am