用字符串生成 HTML

Question

我正在尝试将图像添加到 HTML。使用以下作品：

<img id="image1" src="http://image.jpg" alt=" " width="300" height="300" />

我只想用一个变量替换 http，这样我就可以在网站中调用而不是让它在物理上内联：

<img id="image1" src=URL alt=" " width="300" height="300" />

有人可以帮忙吗？

Answer 1

获取img并设置src：

document.getElementById('image1').src='http://mywebsite.com/image.jpg';

Answer 2

在您的 html 中不设置图像源，但在 DOM 中仍然有 img 元素。即：

<img id="image1" alt=" " width="300" height="300" />

在您的 javascript 中（应该加载到 html 中 <body> 标签的底部），您可以执行以下操作：

var img1 = document.getElementById('image1');

img1.src = "/some/url/or/file-path/here.jpg"

Answer 3

您想动态更改您的 src 属性，这里是如何做的：

// we selct the element to change in a variable
var el = document.getElementById("image1");

// we define a new image
var new_url = 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT744-ntmnfTx78ZjYUG9t_SkW-M2JmpJaUr6iYlyhaVzkXT9q2';

// we set the new image
el.setAttribute("src",new_url);

<img id="image1" src="http://image.jpg" alt="nothing to show" width="300" height="300" />

用字符串生成 HTML

Generating HTML with strings

javascript

string-building