Блог

Главная - Вопросы по программированию - Как бы я вставил изображение в этот текстовый элемент в «текстовом приключении» в javascript?

Как бы я вставил изображение в этот текстовый элемент в «текстовом приключении» в javascript?

#javascript #html

Вопрос:

У меня есть этот раздел кода, я заставил его работать в виде текста, который меняется при нажатии кнопки. Он основан на каком-то коде из серии «выбери свою собственную историю». (Источник: https://github.com/WebDevSimplified/JavaScript-Text-Adventure)

Все работает, кроме изображения, которое я действительно не знаю, как добавить. Я застрял на нем на несколько дней, потому что не могу найти ничего для этого конкретного элемента.

Как бы я загрузил изображение внутри этого элемента, чтобы оно появлялось и исчезало надолго с моим текстом и кнопками?

 const textNodes = [{
        id: 1,
        text: "I did it all for you.",
        //here is where I have attempted to use a variable to insert an image, with 20 being the height (I am very inexperienced)//
        imageOne: 20,
        options: [{
            text: '>>',
            nextText: 2,
        }]
    },
    {

Я также пробовал это, которое копирует формат моих кнопок выбора, но, похоже, это тоже не работает:

 image: [{
            **url: "https://images.unsplash.com/photo-1544526226-d4568090ffb8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aGQlMjBpbWFnZXxlbnwwfHwwfHw=amp;ixlib=rb-1.2.1amp;w=1000amp;q=80"
        }],

Вот что у меня есть в моем html-файле:

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="OP1.0c.css" rel="stylesheet">
    <script defer src="OP1.0j.js"></script>
    <title>Text Adventure</title>
</head>

<body>
    <div class="container">
        <div id="story"></div>
    </div>
    <div id="pictures">
        <image class="image"></image>
    </div>
    <div id="option-buttons" class="btn-grid">
        <button class="btn">Option 1</button>
        <button class="btn">Option 2</button>
        <button class="btn">Option 3</button>
        <button class="btn">Option 4</button>
    </div>
</html>

Комментарии:

1. <image /> Элемент устарел/не рекомендуется ; честно говоря, этот вопрос я вижу впервые. Вместо этого используйте <img/> элемент .

2. Стек съел часть моего кода, но вот где я объявил переменные для кода, который его использовал: //вот где я установил переменную изображения с URL// var imageOne = [{ imgUrl: ‘ images.unsplash.com/… ‘ }]; чувак, я неправильно использую комментарии?

3. О, я всегда забываю об этом, позвольте мне попробовать, отредактируйте: ничего не сделал

4. Передаете ли вы элементу src атрибут, указывающий на изображение? Я вижу, что в вашем <image/> элементе, похоже, нет ничего, что указывало бы ему, откуда можно извлечь ресурс изображения…

Метки: