Yesodod를 처음 접한다면 div의 배경 이미지로 static/img 디렉토리 아래에서 이미지를 사용하는 방법에 대해 궁금합니다. 나는 비계 사이트를 사용하고 시도 :Yesodweb의 배경으로 정적 디렉토리에서 이미지를 사용하는 방법은 무엇입니까?
.mydiv {
background-image: url("static/img/bg.jpg");
}
을하지만 http://myhost/tmp/static/img/bg.jpg에 마지막 변경의 URL을 보인다.
아마도 lucius 템플릿을 사용하고 있었을 것입니다. 실제 CSS 파일은 런타임시 임시 위치 /tmp에서 자동 생성되었으며 상대 경로를 사용했습니다. 필요한 것은 컴파일시 URL 유효성을 확인하는 type-safe URL입니다. 당신이 발판 템플릿을 사용하는 경우
, 당신은 this
주에 따라 @{StaticR img_bg_jpg}로 나타낼 수 yesod-static 및 템플릿의 이전 버전으로, stack clean 정적 디렉토리에 변경 사항을 반영해야 할 수 있습니다.
답장을 보내 주셔서 감사합니다. 그러나 컴파일러는 "범위가 아닌 변수 : img_bg_jpg :: Route Static"이라고 불평합니다. 나는 "config/routes"파일에 정의 된 경로를 가지고 있으며 라우터를 생성하기 위해 Foundation.hs에 "mkYesodData"App "$ (parseRoutesFile"config/routes ")가있다. 컴파일러가 img_bg_jpg를 어디에서 찾을 수 있는지 알려주고 싶습니다. – hliu
@hliu'img_bg_jpg'는 Settings.StaticFiles에서 TemplateHaskell에 의해 자동으로 정의되어야합니다. ghci를 새로 고쳤습니까? ': r'은 충분하지 않습니다. – jeiea
"stack exec - yesod devel"명령을 사용하여 서버를 개발 모드로 실행합니다. img 디렉토리에 이미지를 저장 한 후 다시 실행하면 컴파일러에 오류가 계속 표시됩니다. 다음 경로를 사용하면이 문제가 발생할 수 있습니다. 1) stack test-static-img yesod-simple을 새로 고칩니다. 2) test.jpg를 static/img /에 복사하십시오. 3) templates/default-layout.lucius를 수정하고 세 번째 줄을 background-image로 수정하십시오. url (@ {StaticR img_test_jpg}); 4) stack exec - yesod devel – hliu
[YesSod에서 정적 리소스에 TypeSafe URL을 가져 오는 방법] 가능한 복제본 (http://stackoverflow.com/questions/18929610/how-to-get-a-typesafe-url-to-a-static -resource-in-yesod) – jeiea
이것을 넣으십시오 :'/ static/img/bg.jpg'? – Sibi
@Sibi 작동합니다. 매우 감사합니다! – hliu