alt属性が写真が表示されているのにもかかわらず表示されてしまうというエラーです。

Question

コード index.html.erbです。
```**写真が表示されているにもかかわらずalt属性が作動してしまいます。何が問題なのでしょうかhtmlをcssの順番に載せております。また挿入したハンバーガーメニューも表示されません。わかる方がいらっしゃいましたらぜひよろしくお願い致します。今回の表示は画面のスクショをしたのですがスクショのファイルサイズが2.7MBだったため載せることができませんでした、、すみません。、**
``` <header>
   <title>swapapp</title>
   <p>あなたの欲しいがきっと見つかる</p>
 </header>

 <div class="trigger-container">
   <button class="menu-trigger">
     <span></span>
     <span></span>
     <span></span>
   </button>
 </div>

 <div class="top-image-container">
   <img src="assets/images/for-swapapp.jpg" alt="ヒーローイメージです。">
 </div>

 <% if user_signed_in? %>
 <div class="message">
   <%= "#{current_user.nickname} is already logged in." %>
   <%= link_to "Logout", destroy_user_session_path, method: :delete %>
 </div>
 <%= link_to root_path do %>
 <%= image_tag 'note-pencil.jpeg' ,class: "link-category1"%>
 <% end %>
 <% else %>
 <div class="message">
   <%= link_to "Create your account!", new_user_registration_path %>
 </div>
 <div class="message">
   <%= link_to "Login", new_user_session_path %>
 </div>
 <!--<%= link_to root_path do %>
 <%= image_tag '' ,class: "link-category1"%>
 -->
 <% end %>
 <% end %>```ここに言語を入力
コード

コードindex.cssです。

  z-index:1;
}

.top-image-container {
    width: 100%; /*幅いっぱい!の時は100%*/
    height: 100vh;/*画面に対しての高さ*/
    background: url("for-swapapp.jpg") no-repeat center/cover;
    z-index:0;
}

.message {
position:relative;
text-align-last: end;
font-family: fantasy;
float
}
.message a {
  text-decoration: none;
  color: #000000;
}

h2 {
text-align-last: center;
}

.form-text-wrap {
  width: 100%;
  margin:0 auto;
}

.form-text-wrap select{
  display: flex;
  margin: 0 auto;
}

.input-birth-wrap p{
position :center;
}

.birthday{
  margin: 0 auto;
}

.actions {
  text-align: center;
  margin: 10px;
}

.icon-image1 {
width: 15%;
height: 15%;
}

.link-category1 {
  position:relative;
  width: 15%;
  height: 15%;
}

.top-image-container img{
 max-width:100%;
 width:85%;
 max-height: 95%;
 object-fit: cover;
}

.trigger-container {
  width:100%;
  height:auto;
}

.menu-trigger::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: '';
  width: 84px;
  height: 84px;
  margin: -45px 0 0 -45px;
  border-radius: 50%;
  border: 4px solid transparent;
  transition: all .75s;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(20px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  left: 60%;
  opacity: 0;
  animation: active-menu-bar02 .8s forwards;
}

@keyframes active-menu-bar02 {
  100% {
    height: 0;
  }
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-20px) rotate(45deg);
}
.menu-trigger.active::after {
  animation: circle .4s .25s forwards;
}
@keyframes circle {
  0% {
    border-color: transparent;
    transform: rotate(0);
  }
  25% {
    border-color: transparent #fff transparent transparent;
  }
  50% {
    border-color: transparent #fff #fff transparent;
  }
  75% {
    border-color: transparent #fff #fff #fff;
  }
  100% {
    border-color: #fff;
    transform: rotate(-680deg);
  }
}
コードcss
``````index.jsです。
```
```ここに言語を入力
// Load all the channels within this directory and all subdirectories.
// Channel files must be named *_channel.js.

const channels = require.context('.', true, /_channel.js$/)
channels.keys().forEach(channels)

//ハンバーガーボタンの記述
$(document).ready(function() {
  $(".menu-trigger").click(function () {
    $(this).toggleClass("active");
    $(this).next().toggleClass("onanimation");
    $('ul li').hide();
    $('ul li').each(function(i) {
      $(this).delay(80 * i).fadeIn(500);
    });
  });
});
```

Comments

[m.ts10806]

HTML、cssだけじゃないのと（多分Railsのerbですね）
CSSが半端な状態で提示されているのとで、他者が再現難しい内容かと思います。
あと「出てしまう」だけの文章説明ではわかりませんので、画面キャプチャ追加してください。

>ハンバーグボタン
「ハンバーガーメニュー」ですね。「ハンバーグ」だと全く違ったものになります。

[korogi]

ご指摘ありがとうございます。ご指摘いただいた箇所全て変更したのでご確認いただけますでしょうか？

Answer 1

こんにちは。

推測ですが、

 <div class="top-image-container">
   <img src="assets/images/for-swapapp.jpg" alt="ヒーローイメージです。">
 </div>

とあるのに、

.top-image-container {
    width: 100%; /*幅いっぱい!の時は100%*/
    height: 100vh;/*画面に対しての高さ*/
    background: url("for-swapapp.jpg") no-repeat center/cover;
    z-index:0;
}

とあるので、もしかすると同じ画像を2重に表示しているのではないでしょうか。
そうだとすると、解決方法は、img要素を削除する、だと思います。

Comments

[korogi]

Lhankor_Mhyさんコメントありがとうございます！ご指摘いただいた通りに
background: url("for-swapapp.jpg") no-repeat center/cover;を削除してみました！しかしalt属性はまだ存在し写真は消えました。、何が問題なのでしょうか、、自分でももっとよく考えてみます！????ありがとうございます！

[Lhankor_Mhy]

回答にも書いた通り、img要素を削除してみてください。

[korogi]

img要素を消したらうまくいきました！写真はcssだけで表示していいんですね!勉強になりました！ありがとうございます！