Verwenden eines Bildes von Assets/Bilder in Bootstrap 3

Question

In Bezug auf Beispiel 6 von this Stift, muss ich ein Bild in Assets/Bilder gespeichert statt einer über eine href-Link wie in Beispiel 6 erhalten. Es sieht aus wie Codeänderungen sind benötigt sowohl im CSS als auch im HTML, aber als Neuling bei Rails konnte ich nicht herausfinden, was sie sein müssen.

Zunächst gibt es das HTML:

<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text 
     </a> 

befindet sich hier:

 <div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar6"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text 
    </a> 
    </div> 

und dann gibt es die eine CSS-Code, hier:

.example6 .navbar-brand{ 

    .example6 .navbar-brand{ 

    background: url(https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png) center/contain no-repeat; 
    width: 200px; 

} 

I Wechsel versuchte die CSS zu

background: <%= image_tag("myPETS_logo_36_48.png", class: "navbar-brand", id: "navbar-logo") %> center/contain no-repeat; 
    width: 200px; 

aber selbst wenn dieser Teil richtig ist, es funktioniert nicht, ohne den aktuellen HTML-Code zu korrigieren,

<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text 

Also, was ein fella von Vermögenswerten/Bildern eher als anes Bild zu bekommen zu tun ist über einen href Link ?

Answer 1

Wenn ich richtig verstehe; Sie möchten die (dynamische) Bild-URL in das CSS einfügen. Um das zu tun, werden Sie müssen es inline lösen, wie folgt aus:

<a class="navbar-brand text-hide" href="http://disputebills.com" style="background: url('<%= image_url('myPETS_logo_36_48.png') %>') center/contain no-repeat;" > Brand Text </a> 

image_tag schafft eine img Tag, aber Sie suchen tatsächlich für die Helfer, die den Pfad oder URL für das Bild erzeugt. Weitere Informationen finden Sie unter rails 5.0+ documentation und/oder older rails documentation.

Alternativ können Sie es lösen, indem Sie das Bild in den Ordner /public platzieren und direkt von der CSS verweisen, wie von @ Sebastian-Palma gezeigt.

Bilder im öffentlichen Ordner sind vom Projektstamm zur Verfügung, so kein Bild Pfad Helfer notwendig sind, und es wäre einfach sein:

.navbar-brand { 
    background: url("myPETS_logo_36_48.png") center/contain no-repeat; 
}