如何在Play框架项目中更新来自JavaScript的img的src？ [英] How to update src of a img from javascript in a play framework project?

问题描述

 < img src =@ routes.Assets.versioned （images / bell.png）width =200，height =200id =symbolImg> 
  

图片文件存储在这里。

输出

我试图通过在打字稿文件中添加以下代码来更改图片。

pre $ 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\\） ）; 
  

解决方案

正确且长期的解决方案

所有播放网址均通过路由器进行管理，因此您可以根据需要轻松找到并更改它们。

在Twirl模板中，您可以将URL作为 @ routes.Assets.versioned（images / bell.png） @ ... 是一个动态语句，将被服务器取代，所以它在HTML输出中变成了 /assets/images/cherry.png （当然，if您将添加 sbt-digest 插件，因为它必须与版本相关，那么在生产中，您将获得类似于 / assets / images / aaf512631818fb -cherry.png ）。

您不能在JavaScript客户端文件中使用 @ ，这仅仅是因为它是一个客户端而且 @ 不会被动态替换（但是，如果您以Twirl模板的形式动态生成Javascript文件，则可以使用它），然后在生成该JavaScript文件的时刻在服务器上完成替换） p>

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

简而言之：

1. <

     def javascriptRoutes = Action {implicit request => 
    Ok（
    JavaScriptReverseRouter（jsRoutes）（
    routes.javascript.Assets.versioned 
   ）
   ）.as（text / javascript）
    
     




2. 添加相应路线：
   
   

     GET / javascriptRoutes controllers.Application.javascriptRoutes 
     




3. 加载javascript路由器

    < script type =text / javascriptsrc =@ routes.Application.javascriptRoutes >< /脚本> 
     




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

     document.getElementById（symbolImg）。setAttribute（src，jsRoutes.controllers.Assets.versioned（images / favicon.png）.url）
     

错误且快速的解决方案

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

  document.getElementById（symbolImg） .setAttribute（src，/assets/images/cherry.png）; 
  

请注意，在这种情况下，如果项目将在具有<$ c $的生产环境中运行c> sbt-digest 插件，那么你的 /assets/images/cherry.png 将会是404。

I have a image in my HTML file like this.

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

Image file is stored here.

Output

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.

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

解决方案

Correct and long solution

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

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).

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)

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

In a short:

1. create a javascriptRoutes action in a controller :

   def javascriptRoutes = Action { implicit request =>
     Ok(
       JavaScriptReverseRouter("jsRoutes")(
         routes.javascript.Assets.versioned
       )
     ).as("text/javascript")
   }
   

2. Add correponding route:

   GET     /javascriptRoutes      controllers.Application.javascriptRoutes
   

3. Load the javascript routers

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

4. 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" );

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.

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