web-dev-qa-db-fra.com

Balises IMG SRC et JavaScript

Est-il possible d'appeler une fonction JavaScript à partir de la balise IMG SRC pour obtenir une URL d'image?

Comme ça:

<IMG SRC="GetImage()" />

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

Ceci utilise .NET 2.0.

javascriptasp.netimage
10
David

Nan. Ce n'est pas possible, du moins pas dans tous les navigateurs. Vous pouvez faire quelque chose comme ceci à la place:

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

Votre framework JavaScript préféré vous fournira des moyens plus agréables :)

20
Armin Ronacher

Si vous êtes d'humeur à bidouiller, cela fonctionne aussi.

<img src='blah' onerror="this.src='url to image'">
10
jdizzle

Est-il possible d'appeler une fonction JavaScript à partir de la balise IMG SRC pour obtenir une URL d'image?

Voulez-vous dire faire quelque chose comme ce qui suit?

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

Malheureusement, non, vous ne pouvez pas faire ça. Cependant, vous pouvez faire le hack suivant:

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

Ensuite, avoir le code HTML suivant:

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

L'événement onload ne se déclenche que si vous avez une image réelle définie sur l'attribut src. Si vous ne définissez pas cet attribut, ni sur une chaîne vide ou quelque chose de similaire, vous n'obtiendrez aucun amour. Réglez-le sur un gif transparent de pixel unique ou quelque chose de similaire.

Quoi qu'il en soit, ce hack fonctionne, mais selon ce que vous essayez vraiment d'accomplir, cela peut ne pas être la meilleure solution. Je ne sais pas pourquoi vous voudriez faire cela, mais vous avez peut-être une bonne raison (que vous voudriez partager avec nous!).

7
Jason Bunting

vous pouvez alimenter dynamiquement l'image en appelant une page aspx dans le code SRC.

Ex; 

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

Du côté de la page, vous devrez insérer l’image dans la réponse et modifier le type de contenu d’une image.

Le seul "problème" est que vos images ne seront pas indexées, il vaut mieux mettre du cache sur cette page de fournisseur ou vous allez ravager le serveur.

1
ceetheman

Vous ne pouvez pas le faire en ligne sur l'image @src, mais vous devriez pouvoir l'appeler à partir d'un bloc de script en ligne qui suit immédiatement votre image:

<img src="" id="myImage"/>
<script type="text/javascript">
  document.getElementById("myImage").src = GetImage();
</script>
1
levik

Puisque vous utilisez .NET, vous pouvez ajouter l’attribut runat="server" et définir la variable src dans votre codebehind.

0
Billy Jo

Vous pourriez pouvoir le faire côté serveur. Vous pouvez également attacher un événement onload pour échanger l'image src. Je suppose que la question devient alors, pourquoi devriez-vous utiliser Javascript dans le premier pas?

0
Jonathan Arkell

Événement OnLoad de l'image appelé encore et encore faire quelque chose comme ceci

0
Dilli

que dis-tu de ça?

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]; 
}

ce n'est pas du travail?

<img src="'+imgsBlocks[2]+'" id="get_img"/>
0
dodysugianto

J'ai déjà eu à faire quelque chose comme ça auparavant, et le problème pour l'IIPC est que vous ne pouvez pas modifier l'attribut src d'une image faisant partie de l'arborescence DOM. Donc, votre meilleur pari est d'écrire votre squelette HTML sans l'image et 1) créez une fonction onLoad qui génère un nouvel élément img avec document.createElement, 2) définissez l'attribut src avec setAttribute () et 3) associez-le à votre DOM. arbre.

0
Jeremy DeGroot