IMG SRC теги и JavaScript - PullRequest
       49

IMG SRC теги и JavaScript

10 голосов
/ 22 сентября 2008

Можно ли вызвать функцию JavaScript из тега IMG SRC для получения URL-адреса изображения?

Как это:

<IMG SRC="GetImage()" />

<script language="javascript">
   function GetImage() {return "imageName/imagePath.jpg"}
</script>

Используется .NET 2.0.

Ответы [ 13 ]

20 голосов
/ 22 сентября 2008

Неа. Это невозможно, по крайней мере, не во всех браузерах. Вместо этого вы можете сделать что-то вроде этого:

<img src="blank.png" id="image" alt="just nothing">
<script type="text/javascript">
    document.getElementById('image').src = "yourpicture.png";
</script>

Ваш любимый JavaScript-фреймворк предоставит более приятные способы:)

10 голосов
/ 26 октября 2010

Если у вас настроение для взлома, это тоже работает.

<img src='blah' onerror="this.src='url to image'">
7 голосов
/ 23 сентября 2008

Можно ли вызвать функцию JavaScript из тега IMG SRC для получения URL-адреса изображения?

Вы имеете в виду делать что-то вроде следующего?

<img src="javascript:GetImage()" />

К сожалению, нет - вы не можете этого сделать. Тем не менее, вы можете сделать следующее взломать:

function getImageUrl(img) {
   var imageSrc = "imageName/imagePath.jpg";
   if(img.src != imageSrc) { // don't get stuck in an endless loop
      img.src = imageSrc;
   }
}

Тогда получите следующий html:

<img src="http://yourdomain.com/images/empty.gif" onload="getImageUrl(this)" />

Событие onload сработает, только если у вас есть фактическое изображение, установленное для атрибута src - если вы не установите этот атрибут или установите для него пустую строку или что-то подобное, вы не получите любви. Установите для него однопиксельный прозрачный GIF или что-то подобное.

В любом случае, этот хак работает, но в зависимости от того, что вы действительно пытаетесь достичь, это может быть не лучшим решением. Я не знаю, почему вы хотели бы сделать это, но, возможно, у вас есть веская причина (которой вы хотели бы поделиться с нами!).

1 голос
/ 23 сентября 2008

Вы можете динамически подавать изображение, вызывая страницу aspx в SRC.

Ex;

<img src="provideImage.aspx?someparameter=x" />

На стороне страницы вам нужно поместить изображение в ответ и изменить тип содержимого для изображения.

Единственная «проблема» в том, что ваши изображения не будут проиндексированы, если вам лучше разместить кеш на этой странице провайдера, или вы опустошите сервер.

1 голос
/ 22 сентября 2008

Вы не можете сделать это встроенным в изображение @src, но вы должны быть в состоянии вызвать его из встроенного блока сценария, следующего сразу за вашим изображением:

<img src="" id="myImage"/>
<script type="text/javascript">
  document.getElementById("myImage").src = GetImage();
</script>
0 голосов
/ 09 мая 2012

как насчет этого?

var imgsBlocks = new Array( '/1.png', '/2.png', '/3.png');
function getImageUrl(elemid) {  
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById("get_img").src=imgsBlocks[ind]; 
}

это не работа?

<img src="'+imgsBlocks[2]+'" id="get_img"/>
0 голосов
/ 10 декабря 2008

Событие OnLoad изображения вызывается снова и снова делает что-то подобное

0 голосов
/ 10 декабря 2008

Событие OnLoad изображения вызывается снова и снова, что-то вроде этого

0 голосов
/ 23 сентября 2008

Раньше мне приходилось делать что-то подобное, и IIRC сводится к тому, что вы не можете изменить атрибут src изображения, являющегося частью дерева DOM. Поэтому лучше всего написать свой скелет HTML без изображения и 1) создать функцию onLoad, которая генерирует новый элемент img с document.createElement, 2) установить атрибут src с помощью setAttribute () и 3) прикрепить его к вашему DOM дерево.

0 голосов
/ 22 сентября 2008

Вы могли бы быть в состоянии сделать это на стороне сервера. В качестве альтернативы вы можете прикрепить событие onload, чтобы поменять образ src. Наверное, тогда возникает вопрос: зачем вам использовать Javascript в первом темпе?

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