From the course: React Essential Training
Join today to access over 24,400 courses taught by industry experts.
Displaying images with React - React.js Tutorial
From the course: React Essential Training
Displaying images with React
- [Instructor] Now that we know how to add text to our React application, let's add an image. This can feel a little confusing, but we can add them just like we would in an HTML file. So to start, I want to point out that I have a new folder here called images. And in it there is a file called chef.jpg that we are going to render. So, we're going to collapse this and decide where in the app this should be placed. So, let's first import this. So we'll say import chef from "./images/chef.jpg". Then we're going to place it inside of the project. So in the main, we want to make a few little adjustments to the main component. First we want to wrap everything in a <main> tag and then closing tag here. And from here we will add our image. So we'll say image src={chef}. So we'll use that little JSX expression there. You could also set a property like height here. Remember that if we're passing in a number of any kind, this will be passed in within our curly braces. A string would pass in…
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.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
