如何解决在模板文字中创建一个新的 Image() 对象 - JavaScript
我有一个 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]
打印到屏幕上,而不是显示了缩略图元素。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。