画像のURLが取得できず表示されない

前提・実現したいこと

Ruby on RailsでTinderのUIアプリを作成しています。そこで下記のようなエラーが発生して対象物がTinderのように動かせない状況です。

追記した画像のような仕様です。

発生している問題・エラーメッセージ

ActionController::RoutingError (No route matches [GET] "/images/liked.png"):

ActionController::RoutingError (No route matches [GET] "/images/nope.png"):

該当のソースコード

Products#index
1<div class="topPage">
2  <div id="tinderslide">
3    <ul>
4      <% @products.each do |product| %>
5        <li data-user_id="<%= product.id %>">
6          <div class="userName"><%= product.product_name %></div>
7          
8          <%= attachment_image_tag product, :product_image %>
9          <div class="like"></div>
10          <div class="dislike"></div>
11        </li>
12      <% end %>
13    </ul>
14    <div class="noUser">これで全てです。</div>
15  </div>
16  <div class="actions" id="actionBtnArea">
17      <a href="#" class="dislike"><i class="fas fa-times fa-2x"></i></a>
18      <a href="#" class="like"><i class="fas fa-heart fa-2x"></i></a>
19  </div>
20</div>
21<script>
22  $("#tinderslide").jTinder();
23  $('.actions .like, .actions .dislike').click(function(e){
24  	e.preventDefault();
25  	$("#tinderslide").jTinder($(this).attr('class'));
26  });
27</script>

エラーメッセージで出ているliked.pngとnope.pngはassets/imagesの下に配置してあります。

試したこと

<div class="topPage">
  <div id="tinderslide">
    <ul>
      <% @products.each do |product| %>
        <li data-user_id="<%= product.id %>">
          <div class="userName"><%= product.product_name %></div>
          
          <%= image_tag product.product_image.url(:thumb) %>
          <div class="like"></div>
          <div class="dislike"></div>
        </li>
      <% end %>
    </ul>
    <div class="noUser">これで全てです。</div>
  </div>
  <div class="actions" id="actionBtnArea">
      <a href="#" class="dislike"><i class="fas fa-times fa-2x"></i></a>
      <a href="#" class="like"><i class="fas fa-heart fa-2x"></i></a>
  </div>
</div>
<script>
  $("#tinderslide").jTinder();
  $('.actions .like, .actions .dislike').click(function(e){
  	e.preventDefault();
  	$("#tinderslide").jTinder($(this).attr('class'));
  });
</script>

このようにattachment_image_tagをimage_tagで表示させようとすると、下の画像のようなエラーが出てしまいます。

追記

products#showのimage_tagで表示させたいのは、productテーブルのproduct_imageです。
質問欄に追加した画像のような感じでproduct_imageのbackgroundにliked/pngとnope.pngがある仕様です。

CSS
1html,
2body {
3  height: 100%;
4  padding: 0;
5  margin: 0;
6  position: relative;
7}
8
9/* Wrapper with padding */
10.wrap {
11  height: 300px;
12  padding: 5%;
13}
14
15#tinderslide {
16  position: relative;
17  background: #fff;
18  width: 90vw;
19  height: 70vh;
20  max-width: 600px;
21  margin: 0 auto;
22  ul {
23    margin: 0;
24    position: relative;
25    display: block;
26    height: 100%;
27    & > li {
28      display: block;
29      width: 100%;
30      height: 100%;
31      overflow: hidden;
32      position: absolute;
33      top: 0;
34      z-index: 2;
35      left: 0;
36      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
37      overflow: hidden;
38      text-align: center;
39      padding: 10px 10px 10px 10px;
40      background: #eee;
41      font-size: 24px;
42      color: #000;
43      border: 1px solid #fff;
44      border: 1px solid #dfdfdf;
45      border: 1px solid rgba(96, 96, 96, 0.2);
46      -webkit-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
47      -moz-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
48      -ms-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
49      -o-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
50      transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
51      backface-visibility: hidden;
52      -webkit-backface-visibility: hidden;
53      .userName {
54        position: absolute;
55        bottom: 5px;
56        color: #fff;
57        z-index: 100;
58        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
59      }
60      img {
61        position: absolute;
62        left: 50%;
63        transform: translateX(-50%);
64      }
65    }
66  }
67  .noUser {
68    display: none;
69    position: absolute;
70    top: 50%;
71    left: 50%;
72    transform: translate(-50%);
73    font-size: 20px;
74    width: 100%;
75    text-align: center;
76    &.is-active {
77      display: block;
78    }
79  }
80}
81
82/* Image text */
83#tinderslide li h2 {
84  color: #fff;
85  font-size: 30px;
86  text-align: center;
87  position: absolute;
88  top: 40%;
89  left: 0;
90  width: 100%;
91  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
92}
93
94/* Image rotation */
95#tinderslide li.pane1 {
96  -webkit-transform: rotate(-1deg);
97  -moz-transform: rotate(-1deg);
98  -o-transform: rotate(-1deg);
99  -ms-transform: rotate(-1deg);
100  transform: rotate(-1deg);
101}
102
103#tinderslide li.pane2 {
104  -webkit-transform: rotate(2deg);
105  -moz-transform: rotate(2deg);
106  -o-transform: rotate(2deg);
107  -ms-transform: rotate(2deg);
108  transform: rotate(2deg);
109}
110
111/* Like & dislike badge images */
112#tinderslide .like,
113#tinderslide .dislike {
114  background: image-url("liked.png") no-repeat scroll 0 0;
115  opacity: 0;
116  height: 80px;
117  position: absolute;
118  width: 170px;
119  left: 45px;
120  top: 40px;
121  z-index: 1;
122  overflow: hidden;
123  -webkit-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
124  -moz-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
125  -ms-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
126  -o-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
127  transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
128  -webkit-backface-visibility: hidden;
129  backface-visibility: hidden;
130}
131
132#tinderslide .dislike {
133  right: 45px;
134  left: auto;
135  background: image-url("nope.png") no-repeat scroll 0 0;
136}
137
138/* Image container */
139#tinderslide .img {
140  height: 90%;
141  width: 100%;
142  margin-bottom: 5px;
143  position: relative;
144  -webkit-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
145  -moz-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
146  -ms-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
147  -o-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
148  transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
149  overflow: hidden;
150  backface-visibility: hidden;
151  -webkit-backface-visibility: hidden;
152  -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
153  -webkit-transform-style: preserve-3d;
154}
155
156/* Action - buttons */
157.actions {
158  display: flex;
159  justify-content: space-between;
160  width: 200px;
161  margin: 15px auto;
162  &.is-none {
163    display: none;
164  }
165}
166
167.actions div {
168  position: relative;
169  display: inline-block;
170  margin-right: -4px;
171}
172
173.actions a {
174  display: flex;
175  align-items: center;
176  justify-content: center;
177  background-color: #f7f7f7;
178  background-image: -webkit-gradient(
179    linear,
180    left top,
181    left bottom,
182    from(#f7f7f7),
183    to(#e7e7e7)
184  );
185  background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
186  background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
187  background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);
188  background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
189  width: 80px;
190  height: 80px;
191  position: relative;
192  text-align: center;
193  line-height: 144px;
194  border-radius: 50%;
195  outline: none;
196  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
197  &.dislike {
198    color: #eb5f5f;
199  }
200  &.like {
201    color: #e07474;
202  }
203}
204
205.actions a:hover {
206  text-decoration: none;
207  color: #555;
208  background: #f5f5f5;
209}
210
211/* jTinder status text */
212#status {
213  text-align: center;
214  font-size: 18px;
215  font-family: arial;
216  margin-top: 30px;
217  font-weight: bold;
218}
219
220.topPage {
221  .nav {
222    display: flex;
223    justify-content: space-between;
224    align-items: center;
225    width: 100vw;
226    max-width: 610px;
227    margin: 0 auto;
228    & > ul {
229      display: flex;
230      align-items: center;
231      justify-content: space-between;
232      width: 100%;
233      padding: 10px;
234      & > li {
235        list-style: none;
236        &.personIcon {
237          i {
238            color: #dccbcb;
239          }
240        }
241        &.appIcon {
242          & > a {
243            width: 40px;
244            display: inline-block;
245            & > img {
246              width: 100%;
247            }
248          }
249        }
250        &.messageIcon {
251          i {
252            color: #dccbcb;
253          }
254        }
255      }
256    }
257  }
258}
259

no1knows

2020/02/21 22:53

質問の整理をお願いします。回答のコメントで頂いた下記が本来の質問なのでしょうか？ > products#showのimage_tagで表示させたいのは、productテーブルのproduct_imageです。（がうまく表示できません。）

退会済みユーザー

2020/02/22 07:38

質問がわかりづらく申し訳ないです。そうです。回答のコメントが質問です。宜しくお願いいたします。

行動規範の内容に同意します

回答1件

<%= image_tag "liked.png", alt: "liked" %>

参考：image_tagの使い方　https://techacademy.jp/magazine/22075

投稿2020/02/21 16:52

no1knows

総合スコア3365

退会済みユーザー

2020/02/21 17:45 編集

products#showのimage_tagで表示させたいのは、productテーブルのproduct_imageです。質問欄に追加した画像のような感じでproduct_imageのbackgroundにliked/pngとnope.pngがある仕様です。 githubにもあるのですが、該当するCSSのコードも質問欄に追加しました。宜しくお願い致します。

行動規範の内容に同意します