background-imageをランダム表示したい。

Question

railsでbackground-imageをランダム表示させたいです。

記述内容　

    var bgImages = ['/images/top-image1.jpg', '/images/top-image2.jpg', '/images/top-image3.jpg'];
    var randImages = bgImages[Math.floor(Math.random() * bgImages.length)];
    $('.contents-with-text-link').css('background-image', 'url(' + randImages + ')'); ```

### cssの中(content-with-text-linkにbackground-imageをランダム表示させたい)

　　    .contents-with-text {
     　 height: 330px;
     　 width: 440px;
　　      .contents-with-text-link {
           color: #FFF;
           background-repeat: no-repeat;
           background-size: contain;
           background-position: center;
           height: 300px;
           width: 400px;
          }



```エラー文
jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:6996 GET http://localhost:3000/images/top-image1.jpg 404 (Not Found)

上記が出たので、エラー文のhttp://localhost:3000/imageをクリックすると
RoutingError No route matches [GET] "/images/top-image1.jpg"

とのエラー文もありました。

画像のパスの書き方が悪かったのかと思い、

• /assets/images/top-image1.jpg(top-image2,3も同様)
• /top-image1.jpg(top-image2,3も同様)

など変えてみましたが、エラー内容も変わらずでした。

何かjavascript、または画像のパス、配置場所で間違っているところ、直すところがわかりましたら教えていただけますとありがたいです。よろしくお願いします。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

あと、提示された情報には「top-image.jpg 」しかありません。
「top-image1.jpg」「top-image2.jpg」「top-image3.jpg」はどこにあるのでしょう

Answer 1

top-image1.jpg　はどこに置いてありますか？
app/assets/images ではないですか？
そこですと　/images/top-image1.jpg　ではアクセスできません
public/images に置いてください。

Comments

[atsu-ori2018]

ご返答ありがとうございます！
public/imagesに置いたら無事に表示ができました！
一つ教えていただければありがたいのですが、なぜassets/imagesに置くとアクセスができないのでしょうか？

[winterboum]

そこに置かれたものは、public/assets　にcopyされて使われるようになりますが、そのとき内容に応じて　upload-9d6bd69c93eff905070f9c48abd99f0327e4a31e688b4c004fce297eaaf8ea4d.png　の様に命名されます。1bitでも変わると後半の文字列ががらっとかわります。
これに対応するには<%= asset_path 'top-image1.jpg' %>の様にする必要があります。
*.js　を　　*.js.erb にして、var bgImages = [(<%= asset_path 'top-image1.jpg' %>,<%= ....] とすれば行けるかな

[atsu-ori2018]

ご丁寧にお返事くださりありがとうございました！
今後ともよろしくお願いいたします！