How to link to a static file in Hamlet?

Question

I looked at a previous question that sounds like it’s the same question, but it seems to skip over a part that I must be missing.

I added the import Settings.StaticFiles line at the top of the handler file.

I copied a file called chunk.png into the static folder of the yesod project.

However, no matter what I try, I always get:

Not in scope: 'chunk_png'

I’ve tried adding staticSite "static" or $(staticSite "static") before the whamlet, but to no avail.

Here’s the full code:

module Handler.Foo where

import Import
import Data.List
import Settings.StaticFiles

getFooR :: Int -> Int -> Handler Html
getFooR param1 param2 = do
    staticSite "static"
    defaultLayout [whamlet|
        <img src=@{StaticR chunk_png}>
    |]

I’ve also tried staticFiles "static" (instead of staticSite) but that gives me the error:

Not in scope: 'staticFiles' Perhaps you meant 'staticSite' (imported from Settings.StaticFiles)

There is an entry for /static StaticR Static getStatic in config/routes.

Any ideas?

Answer 1

The solution for me was to add

import Yesod.Static

at the top of the file, and

staticFiles "static"

before the handler function declaration, rather than inside of it.