在模板文字中创建一个新的 Image() 对象 - JavaScript

编程问答 2022-08-26

问题描述

我有一个 JavaScript 图像预览器，可以在用 PHP 处理之前显示图像文件。预览器当前在 Image() 元素内附加一个新的 <article> 对象，该元素本身附加到父容器。

除了下面所做的之外，我还想向 HTML 添加几个其他元素，而不是使用 createElement() 和 append() 创建和附加所有元素，我想知道这是否可行模板文字（模板字符串）？

这是原始代码：

function updateThumbnail(file) {
    
    if (file.type.startsWith("image/")) {

        const uploadImageWrapper = document.createElement('article')

        const thumbnailElement = new Image();

        thumbnailElement.classList.add("drop-zone__thumb");
        thumbnailElement.src = URL.createObjectURL(file);

        showSelectedImages.append(uploadImageWrapper)
        uploadImageWrapper.append(thumbnailElement);
    }

} // end of 'updateThumbnail' function

这里尝试使用模板字符串来实现：

// updateThumbnail function that needs to be able to handle multiple files
function updateThumbnail(file) {
    
    if (file.type.startsWith("image/")) {

        const uploadImageWrapper = document.createElement('article')

        const thumbnailElement = new Image();

        showSelectedImages.innerHTML = 
        `
        <article>
        ${thumbnailElement}
        </article>
        `

        thumbnailElement.classList.add("drop-zone__thumb");
        thumbnailElement.src = URL.createObjectURL(file);

    }

} // end of 'updateThumbnail' function

我没有在控制台中显示任何错误，但是我将 [object HTMLImageElement] 打印到屏幕上，而不是显示了缩略图元素。

是否可以在模板文字中实例化一个新的 Image() 对象？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

imageimagejavascriptobjectobjecttemplate-literals