初投稿です。
至らぬ点もあるかと思いますので暖かい目で見守っていただけると幸いです・・・
Railsで画像を表示する方法にかなり手こずったのでメモとしての記録です。
それでは早速参りましょう！
※haml・scssで記述しています。
画像を表示する方法
まずは、スタンダードに画像を表示する方法。
haml・scssどちらに書いても表示されるみたいです。
どっちに書くのが正解なのと思うところです。
個人的な印象としては画像を背景として使いたい時、
例えば画像の上にテキスト情報表示したい時とか。
そんなときは、background-imageとしてscssに記述したほうが良さげ。
ここの違いよくわからないので違いがわかる方いたらご教授いただきたいです
まず、表示する画像がないといけません。
app/assets/images
こちらのディレクトリーに表示したい画像を格納して準備完了です。
hamlに記述する場合
= image_tag ("画像名.jpg")
これじゃまだ表示できないんですよね。
widthとheightを設定してあげないと表示されません。
そんな時は、scssに画像を整える記述を書く必要があります。
img {
width: 100%;
height: 100%;
}
こんな感じで、width: 100%;とheight: 100%;を指定すると無事表示されます。
今回の場合は「％」ですが「px」でも可能！
hamlで書く時は”= image_tag”これが必須ですね。
scssに記述する場合
.クラス名 {
height: 560px;
width: 100%;
background-image: image-url("ファイル名.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
こんな感じで書くと表示できます。
background-sizeとかその辺のプロパティ書かないと、
画像が「ばぁぁぁぁあぁぁん」ってなります。（悲惨）
あとは、widthとheightの設定も必要です。
実装したいイメージにあったプロパティを選択する必要があります。
本番環境でのみ画像が表示されない
ローカル環境で表示されるのに、本番環境で表示されない・・・
なんてこともあります。
表示できないときのコードがこちら
.クラス名 {
height: 560px;
width: 100%;
background-image: url("ファイル名.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
上のコードと見比べて違うところは
.クラス名 {
background-image: url("ファイル名.jpg");
}
この部分です。
この書き方だと、ローカルでは表示できるけど、本番では表示されません。
.クラス名 {
background-image: image-url("ファイル名.jpg");
}
このように修正することでで本番でもローカルでも表示できるようになります。
データベースにある画像を表示する方法
例えば、商品を登録するときに画像も登録することがあります。
登録した画像を表示したい！！そんな時の方法です。
◇条件1◇画像は別テーブルで保存する場合
別テーブルで保存する理由は、複数枚画像を登録するためです。
一枚だけ登録する場合は、テーブルを分ける必要はないかと思います。
def index
@items = Item.includes(:item_images).order("created_at DESC").limit(5)
end
こんな感じで情報を取得。
item_imagesは画像を保存している箇所です。
- @items.each do |item| #eachで展開
= image_tag item.item_images[0].image.url
img {
width: 100%;
height: 100%;
}
このように書くと表示できました。
正直、めっちゃ記述長い・・・そんな印象
[0]→画像は配列で格納されているみたいで何枚目かの指定をする必要があります。
◇条件2◇画像は別テーブルで保存しない場合
html.erbの記載となります。
def index
@items = Item.order("created_at DESC").page(params[:page]).per(5)
end
こんな感じで情報を取得。
<% @items.each do |item| %>
<%= image_tag item.image.to_s, :size =>'220x220'%>
ちゃっかり、ファイル名.html.erb内でサイズ指定しちゃっています。
これで表示できました
他に、表示する方法あればご教授いただきたいです