【问题标题】：How to update src of a img from javascript in a play framework project?如何在播放框架项目中从 javascript 更新 img 的 src？
【发布时间】：2018-06-08 17:42:13
【问题描述】：

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

【问题讨论】：

在浏览器中查看呈现的 HTML。现有图像的路径看起来与您最初编写的路径完全不同......
@Teemu 有什么不同？我几乎从 html 中复制了 src 以放入 javascript。
第二个的唯一区别是它有 ' 而不是 " 。我现在也更改了它，以便两者相同。仍然不起作用。
我指的是实时文档，而不是您服务器上的文件。
@Teemu 对不起，我没有关注你。我是这方面的初学者。我该如何检查？

标签： javascript html typescript playframework playframework-2.0

【解决方案1】：

正确且长期的解决方案

所有 Play URL 都通过路由器进行管理，因此您可以在需要时轻松查找和更改它们。

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

你不能在 JavaScript 客户端文件中使用 @ 仅仅因为它是一个客户端，@ 不会被动态替换（但是，如果你将 Javascript 文件作为 Twirl 模板动态生成，则可以使用它，然后替换将在生成该 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

加载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。

【讨论】：

感谢您的详细回答:)

【解决方案2】：

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

试试这个

document.getElementById("symbolImg").src='你的图片路径';

【讨论】：