我的HTML文件中有一个像这样的图像。
<img src="@routes.Assets.versioned("images/bell.png")" width="200", height="200" id = "symbolImg">
图像文件存储在此处。
产量
我试图通过在打字稿文件中包含以下代码来更改图像。
document.getElementById("changeImageBtn").addEventListener("click", function () {
document.getElementById("symbolImg").setAttribute("src", "@routes.Assets.versioned('images/cherry.png')" );
document.getElementById("symbolImg").setAttribute("width", "300");
document.getElementById("symbolImg").setAttribute("height", "300");
});
但图像不会改变。这是输出。
编辑1
还尝试了使用转义字符的这些方法。没有效果。
document.getElementById("symbolImg").setAttribute("src", "@routes.Assets.versioned(\"images/bell.png\")" );
.
document.getElementById("symbolImg").setAttribute("src", "@routes\.Assets\.versioned\(\"images/bell\.png\"\)" );
所有播放URL都通过路由器进行管理,因此您可以根据需要轻松找到并更改它们。
在Twirl模板中,你可以获得@routes.Assets.versioned("images/bell.png")
的URL,因为@...
是will be replaced by the server的动态语句,所以它在HTML输出中成为/assets/images/cherry.png
(好吧,如果你要添加sbt-digest
插件,因为它必须是版本化的,然后,在生产中,你会得到像/assets/images/aaf512631818fb-cherry.png
这样的东西。
你不能在JavaScript客户端文件中使用@
只是因为它是一个客户端而且@
不会被动态替换(但是,如果你作为Twirl模板动态生成Javascript文件,你可以使用它,然后在服务器上进行替换那个JavaScript文件的生成时刻)
在客户端javascript上使用Play路由的正确方法是生成它们并从服务器加载。这是一个特殊情况:https://www.playframework.com/documentation/2.6.x/ScalaJavascriptRouting
简而言之:
javascriptRoutes
动作:
def javascriptRoutes = Action { implicit request =>
Ok(
JavaScriptReverseRouter("jsRoutes")(
routes.javascript.Assets.versioned
)
).as("text/javascript")
}
GET /javascriptRoutes controllers.Application.javascriptRoutes
<script type="text/javascript" src="@routes.Application.javascriptRoutes"></script>
您的解决方案仅作为临时解决方案
document.getElementById("symbolImg").setAttribute("src",jsRoutes.controllers.Assets.versioned("images/favicon.png" ).url)
请注意,在这种情况下,如果项目将使用document.getElementById("symbolImg").setAttribute("src", "/assets/images/cherry.png" );
插件在生产环境中运行,那么您的sbt-digest
将为404。
document.getElementById(“symbolImg”)。setAttribute(“src”,“@ routes.Assets.versioned('images / cherry.png')”);
而不是这个试试这个
document.getElementById(“symbolImg”)。src ='your image path';