From the course: React.js Essential Training
Unlock the full course today
Join today to access over 23,200 courses taught by industry experts.
Displaying images with React - React.js Tutorial
From the course: React.js Essential Training
Displaying images with React
- [Instructor] Now that we know how to add text to our react application, let's go ahead and add an image. So let's go ahead and do that here. We're going to open up a website called pexels.com. This is a free stock photo website. We're going to find some sort of restaurant image to put on our page. So, choose whatever one of these feels right to you. I'm going to just click on the first one here, and we're going to right click on this. And we're going to select copy image address. Now, within our component. So here in say our main component, let's go ahead before the unordered list, we're going to add an image tag. And to it, we're going to add a source, which will be whatever this image URL is. Now, if I refresh, I should see this image being added. Couple things to think about here. Number one, this image is really big. So, let's give it a height of 200, which will be 200 pixels. Now if I refresh, it should fit…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.