Генерация HTML со строками
Я пытаюсь добавить изображение в HTML. Используя следующие работы:
<img id="image1" src="http://image.jpg" alt=" " width="300" height="300" />
Все, что я хочу сделать, это заменить http переменной, чтобы я мог звонить на веб-сайт, а не делать его физически встроенным:
<img id="image1" src=URL alt=" " width="300" height="300" />
Кто-нибудь может помочь?
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" />
Получите img и установите src:
document.getElementById('image1').src='http://mywebsite.com/image.jpg';
В вашем html не устанавливайте источник изображения, но все же имейте элемент img в DOM. Т.е.:
<img id="image1" alt=" " width="300" height="300" />
В вашем javascript (который должен быть загружен внизу вашего <body>
тег в вашем html) вы делаете следующее:
var img1 = document.getElementById('image1');
img1.src = "/some/url/or/file-path/here.jpg"