Direct links to image lead to routing error

[j-maas]

I've tried adding links to image's source, so that people can open them full screen if they want to. Unfortunately, when the image is clicked, it reports Page not found. Valid routes: , blog, blog/draft, blog/hello

If I open the link in a new tab, it loads fine, because the error is with elm-pages interception of a link click. I'm not sure exactly what is wrong, but there is definitely the assumptions that such links point to pages, and not directly to images like in this case.

Reproduction

1. In the elm-pages-starter, replace the last definition in src/Page/Article.elm with the following.

   articleImageView : ImagePath Pages.PathKey -> Element msg
   articleImageView articleImage =
       Element.link []
           { url = ImagePath.toString articleImage
           , label =
               Element.image [ Element.width Element.fill ]
                   { src = ImagePath.toString articleImage
                   , description = "Article cover photo"
                   }
           }

2. Run npm run start (or npm run serve), go to http://localhost:3000/blog/hello and click on the image of the book. It should show the error.
3. Now select the url bar and press enter to trigger a new request. It should load the image.
4. You can play around with pressing the browser's back and forward button and clicking on the image.

[tennety]

I thought this was already fixed before 🤔 Just for reference, in case it helps with any regressions: #17

[kyasu1]

I have also encountered with this problem and here are my thoughts.

The easiest work around is just open the image in another tab by using newTabLink, this works as expected. Because all links are once routed to the internal update function as normal Elm app, it is possible to support the behavior as you mentioned if we add another condition to hard reload the page at the following code if the target link is images.

elm-pages/src/Pages/Internal/Platform.elm

Lines 494 to 510 in 007c9c8

	LinkClicked urlRequest ->
	case urlRequest of
	Browser.Internal url ->
	let
	navigatingToSamePage =
	(url.path == model.url.path) && (url /= model.url)
	in
	if navigatingToSamePage then
	-- this is a workaround for an issue with anchor fragment navigation
	-- see https://github.com/elm/browser/issues/39
	( model, Browser.Navigation.load (Url.toString url) )
	else
	( model, Browser.Navigation.pushUrl model.key (Url.toString url) )
	Browser.External href ->
	( model, Browser.Navigation.load href )

But I think the Elm way is creating a page dedicated to display images, so we can keep the app state and navigate pages without loosing user experiences.

[j-maas]

In the new version, opening images on the dev server works as expected.

[dillonkearns]

Thank you for trying it out on the latest version, I was just wondering about this 🙏