2021-10-27 11:40:44 -07:00
---
id: 61537d86bdc3dd343688fceb
title: Step 6
challengeType: 0
dashedName: step-6
---
# --description--
Now you need to give each `img` element a `src` attribute. You are going to use the format `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/#.jpg` , replacing `#` with the `img` element order.
So your first `img` element would use `1.jpg` , your second would use `2.jpg` , and so on.
# --hints--
All ten of your `img` elements should have a `src` attribute.
```js
const images = [...document.querySelectorAll('img')];
assert(images.every(image => image.getAttribute('src')));
```
Your first `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` .
```js
assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
```
Your second `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` .
```js
assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
```
Your third `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` .
```js
assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
```
Your fourth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` .
```js
assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
```
Your fifth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` .
```js
assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
```
Your sixth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` .
```js
assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
```
Your seventh `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` .
```js
assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
```
Your eighth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` .
```js
assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
```
Your ninth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` .
```js
assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
```
2022-04-09 17:41:17 +06:00
Your tenth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg` .
2021-10-27 11:40:44 -07:00
```js
assert(document.querySelectorAll('img')?.[9]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2022-03-14 15:54:43 +00:00
< title > Photo Gallery< / title >
2021-10-27 11:40:44 -07:00
< link rel = "stylesheet" href = "./styles.css" >
< / head >
< body >
< div class = "header" >
< h1 > CSS FLEXBOX PHOTO GALLERY< / h1 >
< / div >
--fcc-editable-region--
< div id = "gallery" >
< img / >
< img / >
< img / >
< img / >
< img / >
< img / >
< img / >
< img / >
< img / >
< img / >
< / div >
--fcc-editable-region--
< / body >
< / html >
```
```css
```
