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

Question

我的 HTML 文件中有这样一张图片。

<img src="@routes.Assets.versioned("images/bell.png")" width="200", height="200" id = "symbolImg">

图像文件存储在这里。

输出

我试图通过在 typescript 文件中添加以下代码来更改图像。

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\"\)" );

Answer 1

正确而长的解决方案

所有 Play URL 都是通过路由器管理的，因此您可以根据需要轻松找到和更改它们。

在 Twirl 模板中，你可以得到 URL 作为 @routes.Assets.versioned("images/bell.png") 因为 @... 是一个动态语句 will be replaced by the server，所以它变成了 /assets/images/cherry.png在 HTML 输出中（好吧，如果你要添加 sbt-digest 插件，因为它必须带有版本，那么在生产中，你会得到类似 /assets/images/aaf512631818fb-cherry.png 的东西）。

您不能在 JavaScript 客户端文件中使用 @ 只是因为它是一个客户端并且 @ 不会被动态替换（但是，如果您生成 Javascript 动态文件作为 Twirl 模板，然后将在生成 JavaScript 文件时在服务器上完成替换）

在客户端使用 Play 路由的正确方法 javascript 是生成它们并从服务器加载。这是此处描述的特例：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

加载 javascript 路由器

<script type="text/javascript" src="@routes.Application.javascriptRoutes"></script>

现在您可以在客户端中使用它们了javascript

document.getElementById("symbolImg").setAttribute("src",jsRoutes.controllers.Assets.versioned("images/favicon.png" ).url)

不正确且快速的解决方案

您的解决方案只能作为临时解决方案

document.getElementById("symbolImg").setAttribute("src", "/assets/images/cherry.png" );

请注意，在这种情况下，如果项目运行在带有 sbt-digest 插件的生产环境中，那么您的 /assets/images/cherry.png 将为 404。

Answer 2

document.getElementById("symbolImg").setAttribute("src", "@routes.Assets.versioned('images/cherry.png')" );

试试这个

document.getElementById("symbolImg").src='your image path';

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

How to update src of a img from javascript in a play framework project?

html

javascript

playframework

playframework-2.0

typescript

正确而长的解决方案

不正确且快速的解决方案