jQuery get the image src

I hope when I click the button, I can get the specific img src and show the img src in the div class img-block 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;

}

$('.button').click(function(){

  var images = $('.img1 img').attr(src);

  alert(images);      

});

But now I face the problem is to get the img src.

So I use alert to make the test, the result is it alert nothing.

edited Jul 15 '17 at 3:47

Cœur

18.1k9108148

asked Nov 12 '13 at 18:32

Chen-Tai Hou

1,55511126

add a comment |

I hope when I click the button, I can get the specific img src and show the img src in the div class img-block 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;

}

$('.button').click(function(){

  var images = $('.img1 img').attr(src);

  alert(images);      

});

But now I face the problem is to get the img src.

So I use alert to make the test, the result is it alert nothing.

edited Jul 15 '17 at 3:47

Cœur

18.1k9108148

asked Nov 12 '13 at 18:32

Chen-Tai Hou

1,55511126

add a comment |

I hope when I click the button, I can get the specific img src and show the img src in the div class img-block 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;

}

$('.button').click(function(){

  var images = $('.img1 img').attr(src);

  alert(images);      

});

But now I face the problem is to get the img src.

So I use alert to make the test, the result is it alert nothing.

edited Jul 15 '17 at 3:47

Cœur

18.1k9108148

asked Nov 12 '13 at 18:32

Chen-Tai Hou

1,55511126

I hope when I click the button, I can get the specific img src and show the img src in the div class img-block 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;

}

$('.button').click(function(){

  var images = $('.img1 img').attr(src);

  alert(images);      

});

But now I face the problem is to get the img src.

So I use alert to make the test, the result is it alert nothing.

jquery

edited Jul 15 '17 at 3:47

Cœur

18.1k9108148

asked Nov 12 '13 at 18:32

Chen-Tai Hou

1,55511126

edited Jul 15 '17 at 3:47

Cœur

18.1k9108148

asked Nov 12 '13 at 18:32

Chen-Tai Hou

1,55511126

edited Jul 15 '17 at 3:47

Cœur

18.1k9108148

edited Jul 15 '17 at 3:47

Cœur

18.1k9108148

edited Jul 15 '17 at 3:47

Cœur

18.1k9108148

asked Nov 12 '13 at 18:32

Chen-Tai Hou

1,55511126

asked Nov 12 '13 at 18:32

Chen-Tai Hou

1,55511126

asked Nov 12 '13 at 18:32

Chen-Tai Hou

1,55511126

add a comment |

5 Answers
5

active

oldest

votes

143

src should be in quotes:

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

answered Nov 12 '13 at 18:33

Stuart Kershaw

9,57942946

2

got it!!! thanks very much!

– Chen-Tai Hou
Nov 12 '13 at 18:34

1

really sorry that I forgot to accept it.

– Chen-Tai Hou
Mar 28 '14 at 16:04

add a comment |

You may find likr

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

answered Apr 27 '17 at 7:36

parth-BSP

9412

add a comment |

This is what you need

 $('img').context.currentSrc

answered Jul 8 '17 at 2:58

suzuko

111

add a comment |

for full url use

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

for relative image url use

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

answered Nov 21 '18 at 12:05

NuOne T Attygalle

821613

add a comment |

-1

TO get current clicked image source and display that image in other
location;

<script type="text/javascript">

        jQuery(document).ready(function($){

            $('body').on('click','img',function(){              

                var imgsrc=$(this).attr('src');             

                $("html").append("<div id='image_popup'><img src='"+imgsrc+"'></div>");

            })

        });

    </script>

answered Jul 5 '16 at 10:03

Samir Karmacharya

652419

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f19937162%2fjquery-get-the-image-src%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

5 Answers
5

active

oldest

votes

5 Answers
5

active

oldest

votes

143

src should be in quotes:

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

answered Nov 12 '13 at 18:33

Stuart Kershaw

9,57942946

2

got it!!! thanks very much!

– Chen-Tai Hou
Nov 12 '13 at 18:34

1

really sorry that I forgot to accept it.

– Chen-Tai Hou
Mar 28 '14 at 16:04

add a comment |

143

src should be in quotes:

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

answered Nov 12 '13 at 18:33

Stuart Kershaw

9,57942946

2

got it!!! thanks very much!

– Chen-Tai Hou
Nov 12 '13 at 18:34

1

really sorry that I forgot to accept it.

– Chen-Tai Hou
Mar 28 '14 at 16:04

add a comment |

143

src should be in quotes:

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

answered Nov 12 '13 at 18:33

Stuart Kershaw

9,57942946

src should be in quotes:

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

answered Nov 12 '13 at 18:33

Stuart Kershaw

9,57942946

answered Nov 12 '13 at 18:33

Stuart Kershaw

9,57942946

answered Nov 12 '13 at 18:33

Stuart Kershaw

9,57942946

answered Nov 12 '13 at 18:33

Stuart Kershaw

9,57942946

2

got it!!! thanks very much!

– Chen-Tai Hou
Nov 12 '13 at 18:34

1

really sorry that I forgot to accept it.

– Chen-Tai Hou
Mar 28 '14 at 16:04

add a comment |

2

got it!!! thanks very much!

– Chen-Tai Hou
Nov 12 '13 at 18:34

1

really sorry that I forgot to accept it.

– Chen-Tai Hou
Mar 28 '14 at 16:04

got it!!! thanks very much!

– Chen-Tai Hou
Nov 12 '13 at 18:34

really sorry that I forgot to accept it.

– Chen-Tai Hou
Mar 28 '14 at 16:04

add a comment |

You may find likr

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

answered Apr 27 '17 at 7:36

parth-BSP

9412

add a comment |

You may find likr

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

answered Apr 27 '17 at 7:36

parth-BSP

9412

add a comment |

You may find likr

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

answered Apr 27 '17 at 7:36

parth-BSP

9412

You may find likr

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

answered Apr 27 '17 at 7:36

parth-BSP

9412

answered Apr 27 '17 at 7:36

parth-BSP

9412

answered Apr 27 '17 at 7:36

parth-BSP

9412

answered Apr 27 '17 at 7:36

parth-BSP

9412

add a comment |

This is what you need

 $('img').context.currentSrc

answered Jul 8 '17 at 2:58

suzuko

111

add a comment |

This is what you need

 $('img').context.currentSrc

answered Jul 8 '17 at 2:58

suzuko

111

add a comment |

This is what you need

 $('img').context.currentSrc

answered Jul 8 '17 at 2:58

suzuko

111

This is what you need

 $('img').context.currentSrc

answered Jul 8 '17 at 2:58

suzuko

111

answered Jul 8 '17 at 2:58

suzuko

111

answered Jul 8 '17 at 2:58

suzuko

111

answered Jul 8 '17 at 2:58

suzuko

111

add a comment |

for full url use

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

for relative image url use

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

answered Nov 21 '18 at 12:05

NuOne T Attygalle

821613

add a comment |

for full url use

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

for relative image url use

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

answered Nov 21 '18 at 12:05

NuOne T Attygalle

821613

add a comment |

for full url use

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

for relative image url use

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

answered Nov 21 '18 at 12:05

NuOne T Attygalle

821613

for full url use

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

for relative image url use

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

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' />

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' />

answered Nov 21 '18 at 12:05

NuOne T Attygalle

821613

answered Nov 21 '18 at 12:05

NuOne T Attygalle

821613

answered Nov 21 '18 at 12:05

NuOne T Attygalle

821613

answered Nov 21 '18 at 12:05

NuOne T Attygalle

821613

add a comment |

-1

TO get current clicked image source and display that image in other
location;

<script type="text/javascript">

        jQuery(document).ready(function($){

            $('body').on('click','img',function(){              

                var imgsrc=$(this).attr('src');             

                $("html").append("<div id='image_popup'><img src='"+imgsrc+"'></div>");

            })

        });

    </script>

answered Jul 5 '16 at 10:03

Samir Karmacharya

652419

add a comment |

-1

TO get current clicked image source and display that image in other
location;

<script type="text/javascript">

        jQuery(document).ready(function($){

            $('body').on('click','img',function(){              

                var imgsrc=$(this).attr('src');             

                $("html").append("<div id='image_popup'><img src='"+imgsrc+"'></div>");

            })

        });

    </script>

answered Jul 5 '16 at 10:03

Samir Karmacharya

652419

add a comment |

-1

TO get current clicked image source and display that image in other
location;

<script type="text/javascript">

        jQuery(document).ready(function($){

            $('body').on('click','img',function(){              

                var imgsrc=$(this).attr('src');             

                $("html").append("<div id='image_popup'><img src='"+imgsrc+"'></div>");

            })

        });

    </script>

answered Jul 5 '16 at 10:03

Samir Karmacharya

652419

TO get current clicked image source and display that image in other
location;

<script type="text/javascript">

        jQuery(document).ready(function($){

            $('body').on('click','img',function(){              

                var imgsrc=$(this).attr('src');             

                $("html").append("<div id='image_popup'><img src='"+imgsrc+"'></div>");

            })

        });

    </script>

answered Jul 5 '16 at 10:03

Samir Karmacharya

652419

answered Jul 5 '16 at 10:03

Samir Karmacharya

652419

answered Jul 5 '16 at 10:03

Samir Karmacharya

652419

answered Jul 5 '16 at 10:03

Samir Karmacharya

652419

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu