jQuery를 사용하여 이미지 소스 변경

해결법

1.당신은 jQuery의 ATTR () 함수를 사용할 수 있습니다. 당신의 img 태그가 'my_image'의 id 속성이있는 경우 예를 들어,이 작업을 수행 할 것입니다 :

당신은 jQuery의 ATTR () 함수를 사용할 수 있습니다. 당신의 img 태그가 'my_image'의 id 속성이있는 경우 예를 들어,이 작업을 수행 할 것입니다 :
```
<img id="my_image" src="first.jpg"/>
```
그럼 당신은이 같은 jQuery를 사용하여 이미지의 SRC를 변경할 수 있습니다 :
```
$("#my_image").attr("src","second.jpg");
```
클릭 이벤트에이를 연결하려면, 당신은 쓸 수 있습니다 :
```
$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});
```
이미지를 회전하려면, 당신이 할 수 있습니다 :
```
$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});
```
2.이미지로드가 성숙 이미지 크기 등과 같은 이후 작업을 수행하기위한 이미지 소스가 대기하지 않을 때 변화 사람들이하는 일반적인 실수 중 하나 당신은 이미지를로드 한 후 물건을 할 jQuery를 .load () 메소드를 사용해야합니다.

이미지로드가 성숙 이미지 크기 등과 같은 이후 작업을 수행하기위한 이미지 소스가 대기하지 않을 때 변화 사람들이하는 일반적인 실수 중 하나 당신은 이미지를로드 한 후 물건을 할 jQuery를 .load () 메소드를 사용해야합니다.
```
$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});
```
편집 이유 : https://stackoverflow.com/a/670433/561545
3.자세한 내용은. 나는 예를 들어 구문을 사용하여 광고 이미지를 JQuery와에 ATTR 방법 src 속성을 설정해보십시오 : $ ( "#이 MYID")를 ATTR를 ( 'SRC', '/images/sample.gif');.

자세한 내용은. 나는 예를 들어 구문을 사용하여 광고 이미지를 JQuery와에 ATTR 방법 src 속성을 설정해보십시오 : $ ( "#이 MYID")를 ATTR를 ( 'SRC', '/images/sample.gif');.

이 솔루션은 유용하고 그것을 작동뿐만 아니라 이미지에 대한 경로를 경로 변경을 변경하지가 작동합니다.

내가 해결이 문제에 대한 검색 아무것도 발견하지했습니다.

이 솔루션은두고있다 '\'를 시작하는 경로에 : $ ( "#은 MYID") ATTR ( 'SRC', '\ 이미지 / sample.gif을.');

이 트릭은 나에게 매우 유용하고 나는 다른 유용 바랍니다.

4.단순한 트릭 각 사용자마다 다운로드 많은 킬로바이트 - - jQuery를 또는 다른 자원 살인 프레임 워크뿐만 아니라이있는 경우뿐만 아니라 네이티브 자바 스크립트 (!) :

단순한 트릭 각 사용자마다 다운로드 많은 킬로바이트 - - jQuery를 또는 다른 자원 살인 프레임 워크뿐만 아니라이있는 경우뿐만 아니라 네이티브 자바 스크립트 (!) :

<img src="img1_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">

이것은 일반적으로 더 우아한 쓸 수 있습니다 :

<html>
<head>
<script>
function switchImg(img){
    img.src = img.src.match(/_on/) ? 
        img.src.replace(/_on/, "_off") : 
        img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
    <img src="img1_on.jpg" onclick="switchImg(this)">
    <img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>

5.나는 어떻게 이미지 SRC를 변경하는 방법을 보여 드리겠습니다 그래서 당신은 당신이 2 개 이상의 이미지를 가지고 ... 여부 (당신의 D1 ID와 특히 C1 클래스에서) 그것은 당신의 HTML에있는 모든 이미지를 회전 이미지를 클릭하면 당신의 HTML한다.

나는 어떻게 이미지 SRC를 변경하는 방법을 보여 드리겠습니다 그래서 당신은 당신이 2 개 이상의 이미지를 가지고 ... 여부 (당신의 D1 ID와 특히 C1 클래스에서) 그것은 당신의 HTML에있는 모든 이미지를 회전 이미지를 클릭하면 당신의 HTML한다.

또한 하나의 이미지가 처음에 표시됩니다 그래서, 어떻게 문서가 준비 후 페이지를 정리하는 방법을 보여 드리겠습니다.

전체 코드
```
$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});
```
항복

또한 배열에 SRCS을 저장할 수 있습니다. 3 개 이미지 jsFiddle 예

그리고 여기에 이미지 주변의 앵커 태그에서하는 HREF를 통합하는 방법은 다음과 같습니다 jsFiddle 예

6.이 캔 작업을 희망

이 캔 작업을 희망

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>

$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});

7.이 같은 이미지 태그에 id 속성을 추가해야합니다 :

이 같은 이미지 태그에 id 속성을 추가해야합니다 :

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

당신은 이미지의 소스를 변경하려면이 코드를 사용할 수 있습니다 :

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });

8.

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());

9.또한이 방법으로 jQuery를 사용하여이 작업을 수행 할 수 있습니다 :

또한이 방법으로 jQuery를 사용하여이 작업을 수행 할 수 있습니다 :
```
$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});
```
이미지 소스에 대해 여러 상태가있는 경우 조건을 가질 수 있습니다.
10.보안 문자 버튼을 재 호출 할 때 저도 같은 문제가 있었다. 일부 검색 후, 지금은 기능 아래의 거의 모든 유명한 브라우저에서 잘 작동 (크롬, 파이어 폭스, IE, 에지, ...)

보안 문자 버튼을 재 호출 할 때 저도 같은 문제가 있었다. 일부 검색 후, 지금은 기능 아래의 거의 모든 유명한 브라우저에서 잘 작동 (크롬, 파이어 폭스, IE, 에지, ...)
```
function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }
```
'theUrl는'새로운 보안 문자 이미지를 렌더링하는 데 사용되며, 귀하의 경우 무시할 수 있습니다. 가장 중요한 포인트는 이미지를 다시 쓰게 FF와 IE를 강제로 새로운 URL을 생성한다.

11.) (jQuery를 클릭을 사용하여 이미지 소스를 변경

) (jQuery를 클릭을 사용하여 이미지 소스를 변경

요소:

    <img class="letstalk btn"  src="images/chatbuble.png" />

암호:

    $(".letstalk").click(function(){
        var newsrc;
        if($(this).attr("src")=="/images/chatbuble.png")
        {
            newsrc="/images/closechat.png";
            $(this).attr("src", newsrc);
        }
        else
        {
            newsrc="/images/chatbuble.png";
            $(this).attr("src", newsrc);
        }
    });

12.오늘 같은 놀라움이, 나는이 길을했다 :

오늘 같은 놀라움이, 나는이 길을했다 :

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});

13.이것은 보장 방법은 바닐라 (또는 단순히 순수) 자바 스크립트에서 수행 얻을 수 있습니다 :

이것은 보장 방법은 바닐라 (또는 단순히 순수) 자바 스크립트에서 수행 얻을 수 있습니다 :
```
var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;
```
14.그냥뿐만 아니라, 그것은 훨씬 더 작은 만들려면 :

그냥뿐만 아니라, 그것은 훨씬 더 작은 만들려면 :
```
$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});
```
15.
```
$("#d1 img").click(e=> e.target.src= pic[e.target.src.match(pic[0]) ? 1:0] );
```
[그림 =하자 "https://picsum.photos/id/237/40/40", // 임의의 - 예 : "img1_on.gif" "https://picsum.photos/id/238/40/40", // 임의의 - 예 : "img2_on.gif" ]; . $ ( "# D1 IMG")를 클릭 (E => e.target.src PIC = [e.target.src.match (PIC [0]) 1 : 0]); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
16.CSS와 이미지 소스를 변경하는 방법은 없습니다.

CSS와 이미지 소스를 변경하는 방법은 없습니다.

유일한 방법은 자바 스크립트 jQuery와 같은 자바 스크립트 라이브러리를 사용하고 있습니다.

이미지는 사업부 내부에 그 이미지와 더 클래스 또는 ID가 없습니다.

논리는 할 이미지가있는 사업부 내부의 요소를 선택할 수 있도록.

그런 다음 루프 모든 이미지 요소를 선택하고 자바 스크립트 / jQuery로 이미지 SRC를 변경합니다.

$ (문서) .ready (함수 () { $ ( "버튼"). (함수 ()을 클릭합니다 { $ ( "# D1 .c1는"). 각 (함수 () { $ (이) .children ( 'IMG') ATTR ( 'SRC', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe.'); }); }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
<버튼> 변경 이미지

from https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 지역 JSON 파일로드 (0)	2020.09.26
[JQUERY] jQuery를 사용한 배열에 JS 객체 변환 (0)	2020.09.26
[JQUERY] 동적 높이 폭 (CSS 레이아웃 유체) 중복]이면 (0)	2020.09.26
[JQUERY] 의 contentEditable 변경 이벤트 (0)	2020.09.26
[JQUERY] jQuery를 $ .ready와 UpdatePanels (문서)? (0)	2020.09.26

복붙노트

[JQUERY] jQuery를 사용하여 이미지 소스 변경

jQuery를 사용하여 이미지 소스 변경

해결법

1.당신은 jQuery의 ATTR () 함수를 사용할 수 있습니다. 당신의 img 태그가 'my_image'의 id 속성이있는 경우 예를 들어,이 작업을 수행 할 것입니다 :

3.자세한 내용은. 나는 예를 들어 구문을 사용하여 광고 이미지를 JQuery와에 ATTR 방법 src 속성을 설정해보십시오 : $ ( "#이 MYID")를 ATTR를 ( 'SRC', '/images/sample.gif');.

4.단순한 트릭 각 사용자마다 다운로드 많은 킬로바이트 - - jQuery를 또는 다른 자원 살인 프레임 워크뿐만 아니라이있는 경우뿐만 아니라 네이티브 자바 스크립트 (!) :

6.이 캔 작업을 희망

7.이 같은 이미지 태그에 id 속성을 추가해야합니다 :

8.

9.또한이 방법으로 jQuery를 사용하여이 작업을 수행 할 수 있습니다 :

10.보안 문자 버튼을 재 호출 할 때 저도 같은 문제가 있었다. 일부 검색 후, 지금은 기능 아래의 거의 모든 유명한 브라우저에서 잘 작동 (크롬, 파이어 폭스, IE, 에지, ...)

11.) (jQuery를 클릭을 사용하여 이미지 소스를 변경

12.오늘 같은 놀라움이, 나는이 길을했다 :

13.이것은 보장 방법은 바닐라 (또는 단순히 순수) 자바 스크립트에서 수행 얻을 수 있습니다 :

14.그냥뿐만 아니라, 그것은 훨씬 더 작은 만들려면 :

15.

16.CSS와 이미지 소스를 변경하는 방법은 없습니다.

'JQUERY' 카테고리의 다른 글

티스토리툴바