jQuery récupère l'image src

104

J'espère que lorsque je clique sur le bouton, je peux obtenir l'img src spécifique et afficher l'img src dans le img-blockbloc de classe div .

HTML

<button class="button">Click</button>
<div class="img1">
    <img src="img.jpg" alt="">
</div>

<div class="img-block"></div>

CSS

.img-block{
    position: absolute;
    top:10%;
    right:10%;
    background-color: red;
    width: 500px;
    height: 500px;
}
.img1 img{
    width: 200px;
}

JS

$('.button').click(function(){
  var images = $('.img1 img').attr(src);
  alert(images);      
});

Mais maintenant, je suis confronté au problème est d'obtenir le src img.
J'utilise donc alert pour faire le test, le résultat est qu'il n'alerte rien.

Chen-Tai
la source

Réponses:

203

src doit être entre guillemets:

$('.img1 img').attr('src');
Stuart Kershaw
la source
6

Vous pouvez trouver likr

$('.class').find('tag').attr('src');
parth-BSP
la source
4

pour une utilisation complète de l'URL

$('#imageContainerId').prop('src')

pour l'utilisation de l'URL relative de l'image

$('#imageContainerId').attr('src')

function showImgUrl(){
  console.log('for full image url ' + $('#imageId').prop('src') );
  console.log('for relative image url ' + $('#imageId').attr('src'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id='imageId' src='images/image1.jpg' height='50px' width='50px'/>

<input type='button' onclick='showImgUrl()' value='click to see the url of the img' />

NuOne
la source
1

C'est ce dont tu as besoin

 $('img').context.currentSrc
Suzuko
la source
1

Dans mon cas, ce format fonctionnait sur la dernière version de jQuery:

$('img#post_image_preview').src;
Nezir
la source