You can add images to your prototypes with a special tag:
img doesn’t have a closing tag. You will see more HTML elements without closing tags in the Form controls article.
The image file has to be stored online for you to be able to enter its URL in the
src is an attribute. Attributes are always placed in the opening tag. They consist of the name of the attribute, followed by an equal sign, followed by a pair of double quotes. The value of an attribute is placed within the parentheses. For example, the
src attribute expects a URL, so the syntax is
Attributes extend the functionality of an HTML element and control its behavior. In this course, you will learn about attributes that change style, specify types of elements, provide placeholder texts, and more.
To get the URL of an image you either find an image online or upload a file yourself:
- Google Images and Unsplash are good places to find images online.
- Services like Imgur allow you to upload and store images for free.
- CodePen Pro is another convenient way to store images, because it allows you to manage them without leaving the prototype, but it is a paid subscription.
Add photos to the prototype from the previous article:
- Open the prototype you created in the previous article and press Fork in the top right of the CodePen’s UI. Rename the prototype. You can also fork the prototype from the article.
<div>photo</div>from the first item on the list. Type
imgand press tab on the keyboard. The editor should convert
imginto the image tag:
<img src="" alt="">
Go to https://uifaces.co/ and choose a photo. Right-click on it and choose Copy Image Address from the browser’s context menu.
Go back to your prototype and paste the URL into the
srcproperty. You should be able to see the photo in the preview.
imgtag in the other two items on the list.
alt is an attribute the allows you to provide text value for the image. This value is shown when the image fails to load. This attribute is also used by screen readers, so it is considered mandatory in web development for accessibility reasons. When prototyping, providing values for
alt is optional, unless you need to test your design with a screen reader.