背景圖像不會渲染Ruby on Rails應用程序

我試圖在類的背景中使用類head來渲染圖像。背景圖像不會渲染Ruby on Rails應用程序

我application視圖寫入Haml的和身體的定義如下：

%body 
    .container 
     .head 
      .sixteen_columns 
      .top-nav

包括在我application樣式是：

.head { 
    background-image: url(/images/background_image.jpg); 
    width: 100%; 
    height: auto; 
}

我已經嘗試了許多變化指定圖像的路徑並多次更改圖像名稱，但無濟於事。

問題是什麼？

來源

2012-07-24 Matt Hollingsworth

你正在使用什麼版本的Rails？ – 2012-07-24 02:28:58

您是否檢查過Chrome Dev Tools或Firebug，您的'.head' div不需要'oveflow：none;'？當你檢查它時會顯而易見，因爲它將具有0的高度，但所有內容仍將顯示出來。嘗試將background-image url設置爲一些公共圖像，如'background-image：url（「http://imgur.com/XMuKF.jpg」）;''圖片的貓順便說一句。如果圖像仍然不顯示，您將會知道這實際上是一個樣式問題。 – Strelok 2012-07-24 04:36:02

嘿嘿！原來它渲染的高度爲0.我發現這很奇怪，因爲它內部的一些嵌套div（.sixteen_columns，.top-nav和其他）正常渲染，處於全高。我添加了一個固定的高度來測試，賓果遊戲，這裏有背景。 – 2012-07-24 14:29:47

假設你正在使用Rails 3.1或超越，系統能正常使用的管道資產爲您的圖片，您可以通過包括圖像文件如下：

.head { 
    background-image: url(/assets/background_image.jpg); 
    width: 100%; 
    height: auto; 
}

這樣做的原因是因爲資產管道的工作方式。它在運行時編譯您的資產，並將您的所有資產放在名爲/assets/的文件夾中。它也會忽略子文件夾結構，它只是將所有內容都轉儲到根文件夾/assets/中，而不是/assets/subfolder/。

來源

2012-07-24 02:44:13

謝謝，但它是Ruby 2.3.x.不是100％確切的版本。 – 2012-07-24 03:28:20

考慮在樣式表中引用圖像時使用asset_path助手。文檔可能會發現here（看看2.2.1）在上下文中，您列出的CSS，你會搖頭

.head { 
    background-image:url(<%= asset_path 'background_image.jpg'%>); 
    width:100%; 
    height:auto; 
}

注：這需要你的樣式表是ERB。

了明確說明的路徑這樣做提供了許多優點，其中之一是，隨着新版本發佈的Rails應用程序的結構發生變化，你會不需要改變你的代碼什麼，以便該圖像正確引用。

這看起來像是矯枉過正只是引用一個圖像，但它是Rails的許多慣例之一，很難得到使用，但很棒！隨着應用的增長和變化，希望能夠更好地忍受時間的考驗。

來源

2012-07-24 03:17:24 rudolph9

否定的。無法得到這個工作枯萎。儘管如此，感謝您提供有關資產的提示。肯定會考慮到這一點。 – 2012-07-24 03:35:40

我看到你正在使用的另一個評論* Rails 2.3.x *，我不相信我的答案適用於'rails <3.1' – rudolph9 2012-07-24 03:37:18

嘗試從控制檯運行

rails -v

，以確認你是什麼版本的Rails上。

聽起來你正在運行rails 2.x應用程序，對嗎？這應該意味着你正在從/ public目錄中提供圖片，js等。一個讓我在css中設置背景圖像的重要問題是，你指定的路徑是相對於樣式表所在的目錄（例如/ public/stylesheets）而不是項目本身的根目錄。

您是否嘗試將路徑從樣式表所在的位置更改爲一個目錄？

.head { 
    background-image: url(../images/background_image.jpg); 
    width: 100%; 
    height: auto; 
}

編輯：你嘗試過什麼其他路徑的bg圖像？

的一些其他可能性可能是：檢查

background-image: url(images/background_image.jpg); 
    background-image: url('../images/background_image.jpg');

的另一件事是先裝載視圖，並使用檢查器（Ctrl鍵Shift + I）研究谷歌瀏覽器股利。選擇div並檢查Chrome分配給它的樣式。

此外，仔細檢查，它仍然是一個名爲background_image.jpg不能告訴你多少次，我已經得到了一些錯字我忽略了焚燒）

來源

2012-07-24 03:43:06 ply

是的，rails 2.x，與/ public。這沒有奏效。我複製並粘貼它。 :(謝謝雖然 – 2012-07-24 03:55:08

真的很奇怪，我想因爲你沒有使用資產管道，這應該與路徑或文件名有關 – ply 2012-07-24 04:20:41

感謝您的幫助，不幸的是，沒有一個工作。表格，以及圖片的完整網址，現在我也對圖片進行了拼寫檢查，同時Chrome也顯示背景樣式正在分配。 – 2012-07-24 13:46:50

解決方案：

原來是兩件事的結合。我用這個格式的背景圖像：

background-image: url(../images/background_image.jpg);

然而，.head div用的0一個height renbdering。我添加了一個固定的高度進行測試，並且這一切都顯示完美。我可以從這裏工作。

非常感謝大家的幫助！

來源

2012-07-24 14:32:12

在軌道4，你現在可以使用CSS和青菜輔助圖像網址：

div.logo {background-image: image-url("logo.png");}

如果你的背景圖片沒有顯示出來考慮看你是如何在你的CSS文件中引用它們。

來源

2013-08-01 20:28:06 lflores

背景圖像不會渲染Ruby on Rails應用程序

回答

相關問題