Javascriptでプレビュー画像を表示させると、HTMLの一部が消えてしまう

Question

Ruby on rails と Javascriot を用いて、レシピの投稿サイトを制作しています。

現在は、新規投稿画面と編集画面の実装をしているのですが、Javascriptでプレビュー画像を表示させると、左端にあるヘッダーの画像だけが消えてしまい、困っています。

もしかしたら、ヘッダーの画像が要素の一番後ろ側に回り込んでしまっているのではないかと思い、CSSにて 「z-index：３；」の記述をしてみたのですが変わりませんでした。

この原因について、どなたかご教授いただけると幸いです。

宜しくお願い致します。

①↓プレビュー表示をしていない状態。ヘッダー左上のロゴは表示されている。

②プレビューを表示した状態。ヘッダー左上のロゴが消えてしまう。

###_form.html.erb (投稿/編集フォーム)

<%= form_with model: post, local: true do |f|%>
<%= render partial: 'errors/error_messages', locals: {model: post}%> 
  <div class="field">
    <%= f.label :category, "カテゴリ" %><br />
    <%= f.collection_select(:category_id, Category.all, :id, :name, {}, {class:"genre-select"}) %>
  </div>

  <div class="field">
    <%= f.label :tite, "タイトル" %><br />
    <%= f.text_field :title, id:"prototype_title" %>
  </div>

  <div class="field">
    <%= f.label :body, "内容" %><br />
    <%= f.text_area :body, class: :form__text, id:"prototype_catch_copy" %>
  </div>

  <div class="field">
    <%= f.label :image, "画像" %><br />
    <%= f.file_field :image, id:"prototype_image" %>
    <div id="image-list"></div>
  </div>

  <div class="actions">
    <%= f.submit "保存する", class: :form__btn  %>
  </div>
<% end %>

###preview.js (画像プレビューのjavascript)

if (document.URL.match( /new/ ) || document.URL.match( /edit/ )) {
    document.addEventListener('turbolinks:load', function(){
      const ImageList = document.getElementById('image-list');
        const createImageHTML = (blob) => {
          //画像を表示するためdivを生成
          const imageElement = document.createElement('div');
          //表示する画像を生成
          const blobImage = document.createElement ('img');
          blobImage.setAttribute('src', blob);
          blobImage.classList.add('img-preview');
      
          // 生成したHTMLの要素をブラウザに表示させる
            imageElement.appendChild(blobImage);
            ImageList.appendChild(imageElement);
        };
      
      document.getElementById('prototype_image').addEventListener('change', function(e){
        // 画像が表示されている場合のみ、すでに存在している画像を削除する
        const imageContent = document.querySelector('img');
        if (imageContent){
          imageContent.remove();
        }
        const file = e.target.files[0];
        const blob = window.URL.createObjectURL(file);

        createImageHTML(blob);
      });
    });
}

style.css

/* ヘッダー */

.header {
  background-color: #FFDEAD;
  margin-bottom: 48px;
  padding: 20px 0;

}
.inner {
  width: 1024px;
  margin: 0 auto;
}
.nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.logo {
  width: 160px;
  height: 35px;
  z-index: 3;
}
.nav__btn{
  display: inline-block;
  padding: 0.4em 1.6em;
  font-size: 0.8em;
  color: gray;
  text-decoration: none;
  user-select: none;
  border: 1px gray solid;
  border-radius: 3px;
  transition: 0.4s ease;
}
.nav__btn:hover{
  color: #fff;
  background: gray;
}

.nav__logout{
  display: inline-block;
  padding: 0.4em 1.6em;
  font-size: 0.9em;
  color: gray;
  text-decoration: none;
  user-select: none;
  margin-left: 50px;
}
.nav__logout:hover{
  opacity: 0.5;
}

.nav__name{
  display: inline-block;
  padding: 0.4em 1.6em;
  font-size: 0.9em;
  color: gray;
  text-decoration: none;
  user-select: none;

}

.nav__name:hover{
  opacity: 0.5;
}

.search_form{
  margin-top: 5px;
}



/* フォーム周り */
.form__wrapper{
  min-height: calc(100vh - 161px);
}

.form__text {
  width: 50%;
}

.field{
  margin: 10px 0;
}

.actions{
  margin-bottom: 40px;
}

.form__btn{
  display: inline-block;
  padding: 0.4em 1.6em;
  font-size: 0.8em;
  color: #fff;
  text-decoration: none;
  user-select: none;
  background: #87CEFA;
  border: 1px #87CEFA solid;
  border-radius: 3px;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
  transition: 0.2s ease;
}

.form__btn:hover {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.img-preview{
  width: 100px;
}

補足情報（FW/ツールのバージョンなど）

Ruby on rails 6.0.0

Answer 1

下記部分でquerySelectorが探してきた一番最初の画像がロゴなのでは。

        // 画像が表示されている場合のみ、すでに存在している画像を削除する
        const imageContent = document.querySelector('img');
```↓
```js
        const imageContent = document.querySelector('#image-list > img');

Comments

[mayuphoo]

ありがとうございます。
おっしゃる通り、querySelectorが探してきた"img"が、ロゴ画像のようでした。

アドバイス頂いた通りに直してみたら、今度はconsoleに 下記のturbolinksのエラーが多発してしまいました。

```
preview.js:17 Uncaught TypeError: Cannot read property 'addEventListener' of null
at HTMLDocument.<anonymous> (preview.js:17)
at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
at r.visitCompleted (turbolinks.js:1007)
at r.complete (turbolinks.js:782)
at r.<anonymous> (turbolinks.js:812)
at turbolinks.js:862
```

このエラーは、リロードすると全て消えます。
ですが最初にリロードしておかないと、プレビュー画像も表示されなくなってしまいました。

どういうことなのか、さっぱりわかりません
```
document.addEventListener('turbolinks:load', function(){
```
の記述は、急に読み込まれなくなってしまったということなのでしょうか？

長くなってしまい、すみません。
もし宜しければ、お返事お待ちしています。

[kei344]

提示した部分だけ書き換えても特にaddEventListenerに関係するわけでもないので別の問題だと思います。