Loading an img object with a src in javascript

Question

I want to add a thumbnail picture to a book's details, derived from the google books api, on the webpage. The code below will place the source code (api) for the appropriate book, first into the text field bookCover and then into the var copyPic, and then it should be copied into imgDisp, but it doesn’t. I can see that bookCover holds the right text, and have checked that copyPic holds the correct content.

<img id="imgDisp" src="http://books.google.com/books/content? 
id=YIx0ngEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api" width="85" height="110"" />

$.getJSON(googleAPI, function(response) {
    $("#title").html(response.items[0].volumeInfo.title);
    $("#subtitle").html(response.items[0].volumeInfo.subtitle);
    $("#author").html(response.items[0].volumeInfo.authors[0]);
    $("#description").html(response.items[0].volumeInfo.description);
    $("#version").html(response.items[0].volumeInfo.contentVersion);
    $("#modeR").html(response.items[0].volumeInfo.readingModes.text);
    $("#bookCover").html(response.items[0].volumeInfo.imageLinks.thumbnail);

    var copyPic = document.getElementById('bookCover').innerHTML;
    document.getElementById("imgDisp").src=copyPic;

Does anyone know why not? Or can I put the api details directly into imgDisp (can’t find such code syntax anywhere on the net)? Everything else is working fine. If I put a src in directly, then it works e.g.

document.getElementById("imgDisp").src = “http://.....api”

but not with a variable.

Just going by the formatting colouring on your code, I can see that there is a spare " at the end of the IMG tag - try removing that first. — ATD
– ATD, Commented Oct 4, 2020 at 10:39
quite right. A result of me moving things around but after correction, still the same problem. I've been digging this hole for a while now trying different things. If you start with a src in the img object, it will be replaced but only by an empty image. — killeme
– killeme, Commented Oct 4, 2020 at 11:48
Without a url to go by, it's difficult to see. My only thought would be that the copy/paste code should be outside of the getJSON() function just in case the browser has not yet fully updated the 'bookCover' element? — ATD
– ATD, Commented Oct 4, 2020 at 12:30

ATD · Accepted Answer · 2020-10-04 19:08:39Z

1

Without more info - eg, I can't see where the getJSON() function ends or what the URL's are, I can't see what the issue may be (except, perhaps, as in my last comment).

I idea seems ok, as I can replicate it (in a cut-down version of course):

function copyImageSource() {
  let d = document.getElementById("bookCover").innerHTML;
  document.getElementById("imgDisp").src = d;

}

<button onclick="copyImageSource();">Get image</button>

<div id="bookCover">https://duckduckgo.com/assets/icons/meta/DDG-icon_256x256.png</div>
<img id="imgDisp" src="">

I assume that this is the sort of thing you are trying to achieve?

(javascript -> jquery:

let copyPic = $("#bookCover").html();
$("#imgDisp").attr("src", copyPic);

)

Version using jquery:

function copyImageSource() {
  let d = $("#bookCover");
  d.html("http://books.google.com/books/content?id=YIx0ngEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api");
  let dCopy = d.html().replace(/&amp;/g, "&");
  $("#imgDisp").attr("src", dCopy);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="copyImageSource();">Get image</button>

<div id="bookCover"></div>

<img id="imgDisp" src="https://www.picsearch.com/images/logo.png"/>

edited Oct 4, 2020 at 19:08

answered Oct 4, 2020 at 12:48

ATD

1,3641 gold badge7 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

killeme Over a year ago

I'm sorry - I should have included the code just before this: $("form").submit( function(e) { e.preventDefault(); var isbn = $('#ISBN').val(); var isbn_without_hyphens = isbn.replace(/-/g, ""); var googleAPI = "googleapis.com/books/v1/volumes?q=" + isbn_without_hyphens; some example ISBN's would be 9780692306611, 9781785780202, 9781523978717

ATD Over a year ago

np - As long as that snippet was what you are trying to achieve, my first thought is about timing - ie, the browser may not have rendered the bookCover element's HTML by the time the copy/paste is requested. So, move that part of the code to below the function and see if that helps. Otherwise, the only other thing I can think of is that you have used jquery for most of it, but vanilla javascript for the copy/paste - you could also try changing those two lines to jquery versions as well.

killeme Over a year ago

It took me a while to set it up to include a cut down version of my code to include yours, but it still doesn't work. It just changes the existing image into a blank space. I've just seen you're added note so I'll try those ideas now. thanks

ATD Over a year ago

Or, that one of the id's you have entered in the code doesn't relate to an actual html element and, therefore, the code is breaking at that point?

ATD Over a year ago

Blank space - or, "no-image" default icon?

|

Eddsters · Accepted Answer · 2020-10-04 19:16:33Z

0

If you have jQuery you can easily do the following:

let source = 'https://img.com/image.png';

//to get the image object that has the above just do this:
let img = $('img[src="' + source + '"]');

answered Oct 4, 2020 at 19:16

Eddsters

4971 gold badge5 silver badges17 bronze badges

4 Comments

killeme Over a year ago

Wow! How did you find this? I'm amazed. However, I'm struggling to understand what I have to do. The problem is there are '&' in the lines I'm using - eg "books.google.com/books/…" - has 4 ampersands. So I need to wrap the $('img...code around the source line and copy that. Is that right? I'm trying to code that now

Eddsters Over a year ago

This is very basic jQuery code, and no, dont worry about the ampersands, and just replace what is in source.. and then console.log(img) after the last line i gave you and see what you get.

killeme Over a year ago

I'm so tired now - I think I'm going to have to go to bed. I think I understand what I need to do. But I have to alter my code before I can test it - and rather than make a big mess I'll have to carry on tomorrow. So grateful for your help. Cheers - big time.

Eddsters Over a year ago

Try this... jsfiddle.net/cxLfpahd, see I can alert the class of that img tag or do whatever I want to do with it, JUST by grabbing an img by its src content

Collectives™ on Stack Overflow

Loading an img object with a src in javascript

2 Answers 2

16 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

16 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related