How do you display an image with a source attached to an object? The object (question) is selected r-CodePudding

I have an array of objects which are questions. This is for a random question quiz. Basically, when one question is randomly selected, I thought all of the attributes would go with it (if "called" correctly). I am not sure how to display the image from the object when the question text (q) displays.

const questionBank = [
{
    q: "This is question 1's text",
    options:['1','2','3','4', '5'],
    answer:4,
    imgURL: 'http://drive.google.com/uc?export=view&id=googleDriveId',
},
{
    q: "question 2 will go here",
    options:['7','6','4'],
    answer:0,
    imgURL: 'http://drive.google.com/uc?export=view&id=differentDriveId',
}

function getNewQuestion(){
    const question = document.querySelector(".question");

    //set question text
    question.innerHTML = currentQuestion.q;

    //add image to question 
    //document.querySelector('.question').appendChild(img); (attempted, did not work)
    //var img = new Image(); (attempted, did not work)
    //img = document.createElement("img");  (attempted, did not work)
    //img.src = document.querySelector('.imgUrl'); (attempted, did not work)

I think that is all the relevant code.

CodePudding user response：

You were on the right track with creating a new img element, if you take a look at this post, you need to create a new image element.

on your last line, instead set image.src = currentQuestion.imgURL as you want the current questions imgURL property, then you can appendChild() your new image element!