🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

1回答

615閲覧

画像の表示が化けしてしまう。

Vannno

総合スコア0

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2020/12/10 04:54

編集2020/12/10 06:15

前提・実現したいこと

イメージ説明
(Ruby on Rails)
画像が化けして表示されないです。

該当のソースコード

<div class="sentence"> <%= @question.text%> <%= image_tag @question.image.variant(resize: '500×500'), class:'question-image'if @question.image.attached? %> </div>

試したこと

iamgeタグで画像を表示しようとした。
urlの記述からインスタンスを使用してのアソシエーションを結んでみた。
cssでスペースなどをとってみた。

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

バージョン '2.7.1'
imageタグの記述に問題があると自身では考えているのですが、何か別に問題があるようでしたら指示通り質問の記述を追加します。
初投稿です。よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

no1knows

2020/12/10 06:32

アップロード先のパスはどこでしょうか?
Vannno

2020/12/10 06:36

localhost 3000です。
guest

回答1

0

適切な回答のためにパスを知りたかったのですが、下記で切り分けができるかと思いますがいかがでしょうか?


参考:画像は public と app/assets/images のどちらに設置すべき?

public ディレクトリに配置した画像を読み込む場合、パスを / から始める必要があります。

Ruby

1<%= image_tag('/tennis_ball.png') %> 2# 生成される img タグの中身 3# <img src="/tennis_ball.png" alt="Tennis ball" /> 4

app/assets/images ディレクトリに設置した画像を読み込む場合、パスを / から始める必要はありません。

Ruby

1<%= image_tag('tennis_ball.png') %> 2# 生成される img タグの中身 3# <img src="/assets/tennis_ball-aa455d01913a920bcfe8749e327219bd4caaca41f7ce325fc5edba8e46372843.png" alt="Tennis ball" /> 4

投稿2020/12/10 07:27

no1knows

総合スコア3365

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Vannno

2020/12/10 07:49

失礼致しました。publicディレクトリにインスタンス(@)を利用して <%= image_tag @question.image.variant(resize: '500×500'), class: 'question-image'if @question.image.attached? %> というように記述している状況です。 投稿の度に画像urlが変わる場合も 上記の<%= image_tag('/tennis_ball.png') %>というようにどうにかして書く必要があるのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問