如何显示带有附加到对象的源的图像？对象（问题）是随机选择的，图像应随之改变

Question

我有一组问题对象。这是一个随机问题测验。基本上，当随机选择一个问题时，我认为所有属性都会随之而来（如果“调用”正确）。我不确定在显示问题文本 (q) 时如何显示对象的图像。

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)

我认为这就是所有相关代码。

Answer 1

您创建新的 img 元素的方向正确，如果您看一下 this post，您需要创建一个新的图像元素。

在你的最后一行，而不是设置 image.src = currentQuestion.imgURL 作为你想要的当前问题 imgURL 属性，然后你可以 appendChild() 你的新图像元素！

如何显示带有附加到对象的源的图像？对象（问题）是随机选择的，图像应随之改变

How do you display an image with a source attached to an object? The object (question) is selected randomly and images should change with them

javascript

image

object

random