Javascript 如何在图像src字符串中编写document.write（）？不'；无法解析

这适用于只打算在本地计算机上运行的Javascript应用程序，可以从本地磁盘访问许多大型图像文件

原始代码如下：

<script>
// Constants, var inits, etc.
</script>

<-- Then html stuff including some control buttons, each one like this -->
<img id="pgb_runStop" onclick="click_runStop()" src="buttons/but_run.png">

<--then a chunk of javascript related to the buttons -->

//常量、变量初始化等。

这东西很好用，看到了吗

现在我想扩展它，所以所有图像路径名都定义为js常量和变量。 在浏览器页面的生命周期内，有些将保持不变，而另一些将通过 用户操作。 我被这件事的一部分难住了。 如何让html解析器注意其中的脚本块

Like: <img src="<script>document.write(B_PATH)</script>something.png">

比如：document.write（B_PATH）something.png”>

这是用于初始页面显示。稍后图像会通过脚本进行更改，这样就可以正常工作了

但是html解析器似乎没有注意到html元素中的脚本

我是一个JavaScriptNubie，所以我可能对它的工作原理有一些愚蠢的误解。 我只是做错了，还是因为某些原因根本不可能做到

下面是一个例子：

<script>
// Constants
PGL_BUT_PATH = "buttons/"      // where the button images etc are.
</script>

<-- some html stuff -->

<-- including some control buttons, each one like this -->
<img id="pgb_runStop" onclick="click_runStop()"
src="<script>document.write(PGL_BUT_PATH);</script>but_run.png">

<--then a chunk of javascript related to the buttons -->

//常数
PGL_BUT_PATH=“buttons/”//按钮图像等的位置。
document.write（PGL_BUT_PATH）；BUT_run.png“>

在调试器中，img元素显示为：

  <img id="pgb_runStop" onclick="click_runStop()"
  src="<script>document.write(PGL_BUT_PATH);</script>but_run.png"/>

document.write（PGL_但_路径）；但是_run.png“/>

目的是为了得到这个：

  <img id="pgb_runStop" onclick="click_runStop()"
  src="buttons/but_run.png"/>

我可以放弃尝试让页面最初使用正确的按钮呈现，然后让js更正它们。我只是很惊讶……在最初的html解析过程中，用这种方式来构造DOM，难道不可能计算js常量吗

编辑以添加：

---

很抱歉，我在这个问题上不够清楚。我想要的是js在第一次呈现页面之前使html内容/DOM正确（根据很早之前定义的js配置值）。以避免在第一次呈现之后出现任何闪烁或调整大小

因此，另一个解决方案是将第一页的呈现延迟到一些脚本运行之后，这样他们就可以在用户看到任何东西之前进行初始DOM调整。有什么方法可以做到这一点吗？ 嗯……事实上，这会解决我的另一个问题。我会努力寻找

---

语义模板工具表明它们很有趣（从未听说过）但是，所有这样的脚本加载项都将在页面首次呈现后执行，这是对的吗？

Javascript本身并不是一个模板引擎，看起来这就是您在这里试图实现的目标。查看Javascript模板库，例如，您会有更多的运气。

不幸的是，Javascript不能以这种方式工作正在将src设置为

，浏览器认为这只是一个奇怪的URL。请尝试：

document.getElementById('pgb_runStop').src = PGL_BUT_PATH + 'but_run.png';

您可以将

pgb_runStop

更改为元素的id

你可以使用像这样的框架来做类似的事情。我自己不使用angular.js，但你可以用它来做一些非常不可思议的事情

---

您还可以使用：

document.getElementById('pgb_runStop')setAttribute('src', PGL_BUT_PATH + 'but_run.png');

---

基本上，您可以：

(function(){window.onload=function(){
        document.getElementById('pgb_runStop')setAttribute('src', PGL_BUT_PATH + 'but_run.png');
};}());

---

它的功能应该完全相同

您不能在另一个标记的属性中嵌入标记。因此您不能在

的

src

中嵌入

。这是无效的，无法解析HTML

但是，您可以做的是在事实之后写入属性：

---

虽然我真的不知道你为什么要这么做。 这个适合我

<img id="uniqueId">

<script>
    var img = document.getElementById('uniqueId')
    img.setAttribute('src', PGL_BUT_PATH)
</script>

或者以另一种方式

<div id="uniqueId"></div>

<script>
    var elem = document.getElementById('uniqueId');
    var img = document.createElement('img');
    img.setAttribute('src', PGL_BUT_PATH);
    elem.appendChild(img);
</script>

函数createImg（src）{
文件。填写（“”）；
}
createImg（PGL_BUT_PATH+'BUT_run.png'）

另一种更通用的方法

<img id="pgb_runStop" onclick="click_runStop()"
     src = "about:blank"
     onerror="javascript:this.src = PGL_BUT_PATH + 'but_run.png'; this.onerror = null;>

函数模板（温度、src）{
文件写入（临时替换（$STR），src）；
}
模板（“”，PGL_BUT_PATH+’BUT_run.png’）

为什么不将整个图像写入：

<script>
  function createImg(src) {
    document.write("<img src='" + src + "'>");
  }
</script>

<script>createImg(PGL_BUT_PATH + 'but_run.png')</script>

document.write（“”）；

---

AngularJS当然附带了一个模板引擎，但这太过分了。一个模板引擎就可以了！@SimonRobb啊，好吧。AngularJS是我想到模板引擎时想到的第一件事。我会留下它，因为OP可能会在其中找到更多的用途。我应该提到，我已经在稍后更改了按钮在脚本中，例如：document.getElementById（'pgb_reverse'）.src=PGL_BUT_PATH+“BUT_revr_gray.png”///grayed out sorry，我在这个问题上不够清楚。我想要的是js能够使html内容正确（根据js配置值）在第一次呈现页面之前。为了避免任何闪烁或调整大小。所以另一个解决方案是将第一次呈现页面延迟到一些scrips运行之后。有没有办法做到这一点？

<script>
  function templete(temp, src) {
    document.write(temp.replace("$STR", src));
  }
</script>

<script>templete('<img id="pgb_runStop" onclick="click_runStop()" src="$STR"/>', PGL_BUT_PATH + 'but_run.png')</script> 

document.write('<img src="' + PGL_BUT_PATH + 'but_run.png"/>');