This module is analgous to Pages.PagePath, except it represents an
Image Path rather than a Page Path. Rather than copy-pasting those docs, I'll
note the differences here. See the Pages.PagePath docs for more background.
PagePath lookupYou can lookup a specific static image path based on its path using the record-based lookup:
Pages.imagesThis gives you a record, based on all the files in your local
images directory, that lets you look paths up like so:
import Pages
import Pages.ImagePath as ImagePath exposing (ImagePath)
homePath : ImagePath Pages.PathKey
homePath =
Pages.pages.index
-- ImagePath.toString homePath
-- => "/"or
import Pages
import Pages.ImagePath as ImagePath exposing (ImagePath)
dillonProfilePhoto : ImagePath Pages.PathKey
dillonProfilePhoto =
Pages.images.profilePhotos.dillon
-- ImagePath.toString helloWorldPostPath
-- => "/images/profile-photos/dillon.jpg"Gives you the image's absolute URL as a String. This is useful for constructing <img /> tags:
import Html exposing (Html, img)
import Html.Attributes exposing (src)
import Pages
import Pages.ImagePath as ImagePath exposing (ImagePath)
-- `Pages` is a generated module
logoImagePath : ImagePath Pages.PathKey
logoImagePath =
Pages.pages.index
linkToHome : Html msg
linkToHome =
img [ src (ImagePath.toString logoImagePath) ] []This allows you to build a URL to an external resource. Avoid using
ImagePath.external to refer to statically available image resources. Instead, use
this only to point to outside images.
import Pages
import Pages.ImagePath as ImagePath exposing (ImagePath)
-- The `Pages` module is generated in your codebase.
-- Notice that we can still annotate this external image
-- with `Pages.PathKey`, since external images are always valid
-- (unlike internal images, which are guaranteed to be present
-- if your code compiles).
benchmarkImagePath : ImagePath Pages.PathKey
benchmarkImagePath =
PagePath.external "https://elm-lang.org/assets/home/benchmark.png"
-- ImagePath.toString benchmarkImagePath
-- => "https://elm-lang.org/assets/home/benchmark.png"Don't bother using these.
There are only two ways to get an
ImagePath:Pages.elmmodule in your repo (see above), orPagePath.external.So
ImagePathrepresents either a 1) known, static image asset path, or 2) an external image path (which is not validated so use these carefully!).