jQuery get the image src

jQuery get the image src

버튼을 클릭하면 특정 img src를 얻을 수 있고 div 클래스에서 img src를 보여주면 좋겠습니다.img-block막다른 골목

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

하지만 지금 문제는 img src를 받는 것입니다.
그래서 저는 테스트를 위해 경보를 사용합니다. 결과적으로 경보는 아무것도 없습니다.

src는 따옴표로 표시되어야 합니다.

$('.img1 img').attr('src');

URL을 모두 사용할 수 있도록

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

상대 이미지 URL 사용

$('#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' />

likr을 찾을 수 있습니다.

$('.class').find('tag').attr('src');

HTML DOM을 처리할 때 (즉,).this), 배열 선택기[0]자바스크립트 배열에서 jQuery 요소를 가져올 때 사용해야 합니다.

$(this)[0].getAttribute('src');

html :

<img id="img_path_" width="24" height="24" src=".." class="img-fluid" alt=“">

js:

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

제 경우에는 이 형식이 최신 버전의 jQuery에서 작동했습니다.

$('img#post_image_preview').src;

이것이 당신에게 필요한 것입니다.

 $('img').context.currentSrc

jQuery(document).ready(function($){
                $('body').on('click','.button',function(){              
                    var imgsrc=$('.img1 img').attr('src');              
                    $(".img-block").append(imgsrc);
                })
            });

언급URL : https://stackoverflow.com/questions/19937162/jquery-get-the-image-src