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

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…

Contents