尝试将图像动态插入模板片段

Question

我正在尝试使用从数据库中提取的 URL 通过后端插入图像，并尝试根据用户在单击“更多”按钮时希望看到的费用来动态显示它们。我是 remplates 的新手，所以我很难理解使用它的语法和过程

在 HTML 页面的模板中显示更多按钮

showMoreBtn.innerText = 'Show More'
                showMoreBtn.addEventListener('click', () => {
                // const img = document.createElement('img')
                // img.src = `uploads/${exp.expFile}`
                // img.src = 'uploads/user2-165015.jpeg'
                console.log('exp File Path', exp.expFile)
                })

HTML 文件中使用的模板代码

</template>
    <template id="expList">
        <section class="expSection">
            <h1 id="expID"></h1>
            <h2 id="expLabel"></h2>
            <p><button class="showMoreBtn" ></button></p>
            <!-- <img id="expImage" src="uploads/user2-1650152674035.jpeg" width="400" height="300"> -->
            </section>
    </template>

问题是我如何从数据库获取的路径中动态插入这些图像，因为它对模板很棘手。任何帮助表示赞赏。谢谢

Answer 1

首先您需要获取 section 元素：

const section = document.querySelector(".expSection");

然后要将其添加到您的页面，您需要：

section.appendChild(img);

尝试将图像动态插入模板片段

Trying to insert an image dynamically to a template fragment

html

javascript

deno