在Bootstrap中使用資產/圖像中的圖像

-1

關於來自this筆的示例6，我需要使用assets/images中存儲的圖像，而不是像例6中那樣通過href鏈接獲取的圖像。它看起來像代碼更改在CSS和HTML中都需要它，但作爲Rails的新手，我還沒有弄清楚他們必須是什麼。在Bootstrap中使用資產/圖像中的圖像

首先，有這個HTML：

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

位置，在這裏：

 <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>

再有就是一個CSS代碼，在這裏：

.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; 

}

我試圖改變CSS到

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

，但即使這部分是正確的，它並沒有修正當前的HTML代碼工作，

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

那麼什麼是傢伙做的就是從資產/圖像，而不是通過一個HREF鏈接ANE圖像？

來源

2017-06-14 Tom Nielsen

如果我理解正確;你想把（動態）圖片url放到CSS中。要做到這一點，你必須在線解決它，就像這樣：

<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創建img標籤，但你實際上是尋找生成的圖像的路徑或URL的幫手。有關更多信息，請參閱rails 5.0+ documentation和/或older rails documentation。

或者，您可以通過將圖像放置在/public文件夾中並直接從CSS引用它來解決此問題，如@ Sebastian-Palma所示。在公用文件夾

圖片都可以從項目的根，所以，沒有圖像路徑助手是必要的，它只會是：

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

來源

2017-06-14 21:36:03 Glenn

在Bootstrap中使用資產/圖像中的圖像

回答

相關問題