CSS/HTML画像をサイトに表示させる方法がわかりません

Question

画像をサインインボタンとしてウェブサイトのヘッダーに追加しようとしています。ユーザーがボタンをクリック/タップすると、ユーザーはサインインページにリダイレクトされます。私はレールアプリでルビーを作成していますが、私のイメージは "app/assets/images"にありますが、イメージが表示されないようです。

イメージをimgurなどのサイトにアップロードして、自分のサイトにリンクしたくないです。

これまで私が試したことはこれです。 CSSでリンクしよう

：

1）background-image: url(../images/sign-in.png) no-repeat;

2）background: url(sigin-in.png);

そして、私はそれをHTMLにリンクしようとdisplay: block; width:128px; height:128px; position: relative;

で動作するようになって試してみた：

<a type="button" class="navbar-toggle btn-signin"> 
    <img class="signin-img" scr="../images/sign-in.png"> 
</a> 

注：<button>タグ、<div>タグ、<a>タグの作成など、HTMLで他の方法も試しました。

「.png」画像ですが、これは表示されない要因ですか？

Answer 1

画像のsrcの値を../../assets/images/sign-in.pngに変更してみてください。

あなたの完全な画像要素は次のようになります。

<img class="signin-img" src="../../assets/images/sign-in.png">

Answer 2

をここでは、backgound-画像と背景リピートを混合されています

background-image: url(../images/sign-in.png) no-repeat; 

が、これは次のようになります。

background: url(../images/sign-in.png) no-repeat; 

また、一部のRoRアプリでは、MVCパターンを使用してアセットが再作成されていますアプリケーションのルートレベルから離れているので、ファイルへのパスを変更する必要があります。

おそらくあなたは "../"を削除してみることができますか？

他の画像が正しく表示されていますか？

幸運！

Answer 3

私は問題を解決しました！私はレールと何か関係があると思っていました。これはレールアプリ/サイトを作るときにのみ起こるからです。私のhtmlファイルが（埋め込まれたルビー）ERBあるので

は、私はこのように私のhtmlでの「埋め込み」イメージを持っていた：

<img src="<%= asset_path('sign-in.png') %>" /> 

は答えたみんなにありがとう！

Answer 4

まず、srcではなく、scrであることを確認してください。

<img class="signin-img" scr="../images/sign-in.png"> # bad 
<img class="signin-img" src="../images/sign-in.png"> # good 

第二に、開発ツール（https://developer.chrome.com/devtools）を開くと、ブラウザが画像を要求しているかどうかを確認：

images/sign-in.png 

それは次のようになります。（必ずネットワークにいる作りますタブ）