如何在播放框架项目中从 javascript 更新 img 的 src? [英] How to update src of a img from javascript in a play framework project?

问题描述

我的 HTML 文件中有一个像这样的图像.

I have a image in my HTML file like this.

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

图像文件存储在这里.

输出

我试图通过在打字稿文件中包含以下代码来更改图像.

I was trying to change the image by having the following code in a typescript file.

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

但是图像没有改变.这是输出.

But the image doesn't change. This is the output.

编辑 1

也用转义字符尝试了这些方法.没有效果.

Also tried these ways with escape characters. Had no effect.

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

.

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

推荐答案

正确且长的解决方案

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

Correct and long solution

All Play URLs are managed through the router, so you can easily find and change them if you need.

在 Twirl 模板中，您可以将 URL 设为 @routes.Assets.versioned("images/bell.png") 因为 @... 是一个将被服务器替换的动态声明，所以变成了/assets/images/cherry.png 在 HTML 输出中(好吧，如果你添加 sbt-digest 插件，因为它必须带有版本，那么，在生产中，你会得到类似于 /assets/images/aaf512631818fb-cherry.png).

In Twirl templates, you can get URL as @routes.Assets.versioned("images/bell.png") because of the @... is a dynamic statement that will be replaced by the server, so it became /assets/images/cherry.png in the HTML output (well, if you will add sbt-digest plugin, as it must be with versioned, then, in production, you will get something like /assets/images/aaf512631818fb-cherry.png).

您不能在 JavaScript 客户端文件中使用 @ 仅仅因为它是一个客户端并且 @ 不会被动态替换(但是，如果您生成 Javascript，您可以使用它动态文件作为 Twirl 模板，然后将在生成该 JavaScript 文件的瞬间在服务器上完成替换)

You can not use @ in the JavaScript client file just because it's a client and @ will not be dynamically replaced (yet, you can use it if you generate Javascript file dynamically as a Twirl template, then replacement will be done on the server in a moment of generation that JavaScript file)

在客户端 javascript 上使用 Play 路由的正确方法是生成它们并从服务器加载.这是这里描述的一个特殊情况:https://www.playframework.com/documentation/2.6.x/ScalaJavascriptRouting

The correct way to use Play routings on the client javascript is to generate them and load from the server. It's a special case described here: 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")
}

添加对应路由:

Add correponding route:

GET     /javascriptRoutes      controllers.Application.javascriptRoutes

加载 javascript 路由器

Load the javascript routers

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

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

Now you can use them in the client javascript

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

不正确且快速的解决方案

您的解决方案仅适用于临时修复

Incorrect and fast solution

Your solution is good only as a temporary fix

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

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

Be aware, in the case, if the project will run in a production environment with sbt-digest plugin then your /assets/images/cherry.png will be 404.

这篇关于如何在播放框架项目中从 javascript 更新 img 的 src?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！