如何在靜態目錄下使用圖像作爲Yesodweb中的背景？

Yesod的新手，我想知道如何使用static/img目錄下的圖片作爲div的背景圖片。我用的腳手架網站，並曾嘗試：如何在靜態目錄下使用圖像作爲Yesodweb中的背景？

.mydiv { 
    background-image: url("static/img/bg.jpg"); 
}

但似乎在向http://myhost/tmp/static/img/bg.jpg最後的URL改變。

來源

2017-03-01 hliu

可能的重複的[如何獲得一個TypeSafe URL到一個靜態資源在Yesod]（http://stackoverflow.com/questions/18929610/how-to-get-a-typesafe-url-to-a-static - 資源在yesod） – jeiea

嘗試把這個：'/靜態/ img/bg.jpg'而不是？ – Sibi

@Sibi它的工作原理。非常感謝！ – hliu

也許你在使用lucius模板，真正的css文件是在運行時臨時位置/tmp自動生成的，並且使用了相對路徑。你需要的是type-safe URL它在編譯時驗證URL的有效性。

如果您使用腳手架模板，然後你可以根據this

注意它表示爲@{StaticR img_bg_jpg}：隨着舊版本的yesod-static和模板，stack clean可能需要反映靜態目錄的變化。

來源

2017-03-01 05:33:02 jeiea

感謝您的回覆。但編譯器抱怨「變量不在範圍內：img_bg_jpg :: Route Static」。我有在文件「config/routes」中定義的路由，並在Foundation.hs中有「mkYesodData」App「$（parseRoutesFile」config/routes「）」來生成路由器。我錯過了什麼讓編譯器知道在哪裏可以找到img_bg_jpg？ – hliu

@hliu'img_bg_jpg'應由TemplateHaskell的Settings.StaticFiles自動定義。你重新加載了ghci嗎？ '：r'是不夠的。 – jeiea

我使用命令「stack exec - yesod devel」以開發模式運行服務器。將圖像放入img目錄後，我重新運行，編譯器仍然顯示錯誤。使用下面的路徑可以得到這個問題。 1）stack new test-static-img yesod-simple; 2）將test.jpg複製到static/img /中; 3）修改templates/default-layout.lucius，修改第三行爲background-image：url（@ {StaticR img_test_jpg}）; 4）堆棧exec - yesod devel – hliu

如何在靜態目錄下使用圖像作爲Yesodweb中的背景？

回答

相關問題