如何在play框架项目中从javascript更新img的src？

Posted 2021-04-05

我的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")" );

答案

Correct and long solution

所有播放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

简而言之：

1. 在控制器中创建一个javascriptRoutes动作： def javascriptRoutes = Action { implicit request => Ok( JavaScriptReverseRouter("jsRoutes")( routes.javascript.Assets.versioned ) ).as("text/javascript") }
2. 添加相应的路线： qazxsw poi
3. 加载javascript路由器 GET /javascriptRoutes controllers.Application.javascriptRoutes
4. 现在您可以在客户端javascript中使用它们 <script type="text/javascript" src="@routes.Application.javascriptRoutes"></script>

Incorrect and fast solution

您的解决方案仅作为临时解决方案

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';