在javascript中加载带有src的img对象

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 eg

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

but not with a variable.

Answer 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(/&/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"/>

Answer 2

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 + '"]');