Установка переменной в html для использования в качестве источника изображения - PullRequest
Новая
       0

Установка переменной в html для использования в качестве источника изображения

0 голосов
/ 07 мая 2020

Хотелось бы знать. Можно ли установить переменную в html и использовать эту переменную как img sr c. Я бы использовал одно и то же изображение регулярно и не хочу обновлять его каждый раз, когда меняю его. Я новичок в Javascript и HTML.

Я пробовал это, но знал, что это не сработает. Но все равно попробовал. 

<body>

<var a1>images/wildlife/dog.jpg</var>

<img src="var a1" id="event-1">

</body>

Путь к изображению правильный, поскольку он отображает изображение, если я использую этот точный путь в качестве src = "..."

Кто-нибудь может указать мне, пожалуйста в направлении достижения sh этого. Я мало знаю о php и MySql.

Ответы [ 5 ]

1 голос
/ 07 мая 2020

В HTML нет переменных, как указано в комментариях. Вот как это можно сделать в javascript. 

const a1 = "images/wildlife/dog.jpg";
const image = document.getElementById("event-1");
image.src = a1;
<img src="" id="event-1">
0 голосов
/ 07 мая 2020

Может это еще один ответ на ваш вопрос. Ко всем img с идентификатором события будет применен тот же файл .jpg, указанный в var 

<!DOCTYPE html>
<html>
<body>
<var id="path">images/wildlife/dog.jpg</var>

<img src="" id="event-1"></img>

<script type="text/javascript">
(function () {
  var path = document.getElementById("path").innerHTML;
  document.getElementById("event-1").src = path;
})();
</script>

</body>
</html>
0 голосов
/ 07 мая 2020

Вы можете добиться этого с помощью кода JavaScript

  1. Назначьте идентификатор тегу изображения - # img1

  2. Напишите свой JavaScript код, который будет выполняться сразу после загрузки вашего веб-сайта ----------

    window.onload = Window_OnLoad; function Window_OnLoad () {}

  3. Внутри функции на ШАГЕ 2 (Window_OnLoad) объявите переменную и назначьте ей источник изображения ----------

    const imgSr c = "imgpath.png"

  4. Теперь вызовите получение идентификатора img на ШАГЕ 1 и назначьте ему путь как ------- -

    document.getElementById ("img1"). Sr c = imgSr c

Вы можете присвоить переменную imgSr c разным теги изображений. Когда вам нужно его изменить, вы можете изменить только значение переменной. Это должно сработать

0 голосов
/ 07 мая 2020

Сначала установите id для тега изображения

затем используйте JavaScript и установите sr c изображения 

 const a1 = 'https://nodejs.org/static/images/logo.svg';
    const image = document.getElementById("image");
    image.src = a1;
<!DOCTYPE html>
<html>

<body>
       <img src="" id="image" height="150px" width ="150px">
</body>
</html>
0 голосов
/ 07 мая 2020

Это было бы возможно с обычным CSS, используя CSS переменные и атрибут содержимого CSS . 

:root {
  --a1: url('https://i.picsum.photos/id/1008/200/300.jpg');
}

img {
  content: var(--a1);
}
<img width="200" height="300" />

Совместимость с браузером:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...