Question

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

我需要使用getElementbyID吗？

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

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

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

我下面的内容是我对如何编写它的最佳猜测，但我在控制台日志中找到了“未找到”。图片在文件夹中，因为在我用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做;只需确保每个字符串＆＃39;组件用引号括起来，然后使用加号（@Injectable() export class HttpInterceptorService { constructor(private _http: Http) { } get<T>(relativeUrl: ApiUrl): Observable<T> { const baseUrl = environment.apiBaseUrl + environment.apiLearnerUrl; let apiUrl = baseUrl + relativeUrl.toString(); return this._http.get(apiUrl).map(res => <T>res.json()); } post<T>(relativeUrl: ApiUrl, inputData: any): Observable<T> { const baseUrl = environment.apiBaseUrl + environment.apiLearnerUrl; let apiUrl = baseUrl + relativeUrl.toString(); if (inputData === undefined) { return this._http.post(apiUrl, undefined).map(res => <T>res.json()); } else { return this._http.post(apiUrl, inputData).map(res => <T>res.json()); } } delete<T>(relativeUrl: string): Observable<T> { const baseUrl = environment.apiBaseUrl + environment.apiLearnerUrl; let apiUrl = baseUrl + relativeUrl; return this._http.delete(apiUrl).map(res => <T>res.json()); } }）与变量连接。请注意，变量应不在引号中;只有支持字符串应该是。

例如，如果您拥有变量+，并希望在网址cat中制作变量，则可以使用pictures/animals/cat.jpg。

另请注意，您的'pictures/animals/' + $ANSWER + '.jpg'和width值也需要用引号括起来，height的初始设置无关紧要，因为它会被覆盖。

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

＆＃13;

src

＆＃13;

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

＆＃13;

对于特定于jQuery的解决方案，您可以使用 attr() 方法，将<div> <img id="ANSWER" width="80%" height="auto"> </div>作为第一个参数，将您的合并网址作为第二个参数：

＆＃13;

'src'

＆＃13;

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

＆＃13;

希望这有帮助！：）

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>

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

3 个答案: