如何在HTML图像源标记中连接Javascript变量

Question

如何将Javascript变量连接到HTML图像源标记的URL？我尝试了.$ANSWER. "$ANSWER"和+$ANSWER+，但这些都没有奏效。

我需要使用getElementbyID吗？

我有一个名为cat.jpg，dog.jpg等的图像文件夹，我有一个这些动物名称的javascript数组。

其中一个被选为$ANSWER，然后我想使用变量$ANSWER显示图像。

我已经在互联网上搜索了如何做到这一点的任何例子，但找不到任何。

我在下面的内容是我对如何编写它的最佳猜测，但我在控制台日志中得到“Not found”。图片在文件夹中，因为在我用Javascript重写之前，这在PHP中工作。

<div>
<img id="ANSWER" src='pictures/animals/$ANSWER.jpg' width=80% height=auto >   
</div>
<script>
document.getElementById("ANSWER").src='pictures/animals/$ANSWER.jpg';
</script>

另外，如果在JQuery中有一种简单的方法可以做到这一点，我很想知道。

Answer 1

这很容易用原始JavaScript做;只需确保每个'string'组件都用引号括起来，然后使用加号（+）与你的变量连接。请注意，变量不应该在引号中;只有支持字符串应该是。

例如，如果您有变量cat，并且想要在URL pictures/animals/cat.jpg中制作它，那么您将使用'pictures/animals/' + $ANSWER + '.jpg'。

另请注意，您的width和height值也需要用引号括起来，并且src的初始设置无关紧要，因为它被覆盖。

这可以在以下内容中看到：

var $ANSWER = 'cat';
document.getElementById("ANSWER").src = 'pictures/animals/' + $ANSWER + '.jpg';
console.log(document.getElementById('ANSWER').src);

<div>
  <img id="ANSWER" width="80%" height="auto">
</div>

对于特定于jQuery的解决方案，您可以使用attr()方法，将'src'作为第一个参数传递，将组合的URL作为第二个参数：

var $ANSWER = 'cat';
$("#ANSWER").attr('src', 'pictures/animals/' + $ANSWER + '.jpg');
console.log(document.getElementById('ANSWER').src);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <img id="ANSWER" width="80%" height="auto">
</div>

希望这可以帮助！ :)

Answer 2

这是你想要的：

var el = document.getElementById("ANSWER");
var images = ['dog', 'cat', 'fish'];
var index = 0;


function setImage() {
  var img = images[index];
  el.src = `pictures/animals/${img}.jpg`;
  index++;
  if (index >= images.len) {
    index = 0;
  }
}

setImage(); // Get the first URL into the img tag
setInterval(setImage, 2000); // Change images every 2 seconds.

<div>
  <img id="ANSWER" src="" width="80%" height="auto" />   
</div>

这是在线图像：

var el = document.getElementById("ANSWER");
var images = [
  'https://cdn.rentcafe.com/dmslivecafe/UploadedImages/57ffbe5a-055d-43c1-98fa-8be16ba066ca.jpg',
  'http://archer.gamebanana.com/img/ico/sprays/kitten2_render.png',
  'https://is5-ssl.mzstatic.com/image/thumb/Purple118/v4/71/46/8d/71468d8f-f9f9-cc04-b346-04a8fef0e7f1/source/256x256bb.jpg'];
var index = 0;


function setImage() {
  el.src = images[index];
  index++;
  if (index >= images.len) {
    index = 0;
  }
}

setImage(); // Get the first URL into the img tag
setInterval(setImage, 2000); // Change images every 2 seconds.

<div>
  <img id="ANSWER" src="" width="80%" height="auto" />   
</div>

Answer 3

如果在PHP中声明$ANSWER，则呈现的HTML / JS将不会知道它。

你需要做这样的事情：

<div>
<img id="ANSWER" src='pictures/animals/$ANSWER.jpg' width=80% height=auto >   
</div>
<script>
document.getElementById("ANSWER").src='pictures/animals/<?php echo $ANSWER; ?>.jpg';
</script>

注意：我已经很久没用过PHP了，所以我在PHP语法的细节上可能会出错。但是，希望你会明白这个想法。

如果它在JS中的某个地方声明，你可以像这里建议的其他一些答案那样连接它：

<div>
<img id="ANSWER" src='pictures/animals/$ANSWER.jpg' width=80% height=auto >   
</div>
<script>
document.getElementById("ANSWER").src='pictures/animals/' + $ANSWER + '.jpg';
</script>