選択画像のプレビュー機能

前提・実現したいこと

<input>で挿入した画像をプレビューする機能の実装

該当htmlコード

html
1<div class="upload__box exhibition__content__box">
2<div class="upload__box__head">
3出品画像
4<p class="upload__box__head__sub">最大4枚までアップロードできます</p>
5</div>
6<div class="upload__box__images">
7<div class="upload__box__image">
8<label for="image1">
9<img alt="Item upload dummy" height="100%" width="100%" src="https://asset.fril.jp/assets/new_web/item_upload_dummy-0f57862f590c6e592ffa657b6b8c6fbdd3c4051a1acc60d72e5a15f4f71f7351.png">
10</label>
11<input id="image1" style="display: none;" type="file">
12</div>
13<div class="upload__box__image">
14<label for="image2">
15<img alt="Item upload dummy" height="100%" width="100%" src="https://asset.fril.jp/assets/new_web/item_upload_dummy-0f57862f590c6e592ffa657b6b8c6fbdd3c4051a1acc60d72e5a15f4f71f7351.png">
16</label>
17<input id="image2" style="display: none;" type="file">
18</div>
19<div class="upload__box__image">
20<label for="image3">
21<img alt="Item upload dummy" height="100%" width="100%" src="https://asset.fril.jp/assets/new_web/item_upload_dummy-0f57862f590c6e592ffa657b6b8c6fbdd3c4051a1acc60d72e5a15f4f71f7351.png">
22</label>
23<input id="image3" style="display: none;" type="file">
24</div>
25<div class="upload__box__image">
26<label for="image4">
27<img alt="Item upload dummy" height="100%" width="100%" src="https://asset.fril.jp/assets/new_web/item_upload_dummy-0f57862f590c6e592ffa657b6b8c6fbdd3c4051a1acc60d72e5a15f4f71f7351.png">
28</label>
29<input id="image4" style="display: none;" type="file">
30</div>
31</div>
32</div>

該当scssコード

scss
1.upload__box{
2  height: 350px;
3  &__head{
4    font-size: 16px;
5    font-weight: 900;
6    &__sub{
7      font-size: 12px;;
8    }
9  }
10  &__images{
11    height: 200px;
12    display: flex;
13    justify-content: space-between;
14    margin-top: 10px;
15  }
16  &__image{
17    width: 24%;
18    border: 1px dotted gray;
19    background-color: rgb(245,245,245);
20  }
21}