How to show images using the playback platform and Scala on the watch page

Question

Using the Play platform, I am trying to display a friend_request.png image on a watch page.

This is my code, but the image does not display:

 <img src=@ ("images/friend_request.png") width="28" height="22" /> 

Answer 1

I assume that you want to include a static image, and since you are talking about Scala, I assume that you are using Play Framework 2.

The corresponding place of the image in the standard project layout should be public/images/friend_request.png . Then you can refer to the image:

 <img src="@routes.Assets.at("images/friend_request.png")" width="28" height="22" /> 

Further information on assets (caching time, etc.) can be found in the Playback Platform Documentation .

Answer 2

Skyr answer does not work for my version of Play (2.4.2). Using this method results in the following compilation error:

Value in is not a member of the controllers. Reverseversessets

After consulting the documentation, this works for me:

 <img src="@routes.Assets.versioned("images/yourImage.png")"> 

where yourImage.png is in public/images .

---

If you want to speed up page loading by caching and compressing your images (and all other assets of your web application), try the following:

Make sure your plugins.sbt contains the following entries:

 addSbtPlugin("com.typesafe.sbt" % "sbt-rjs" % "1.0.7") addSbtPlugin("com.typesafe.sbt" % "sbt-digest" % "1.1.0") addSbtPlugin("com.typesafe.sbt" % "sbt-gzip" % "1.0.0") 

Then in build.sbt add the following:

 // Apply RequireJS optimizations, create a checksum, and zip each asset pipelineStages := Seq(rjs, digest, gzip)