javascript - Brave 浏览器上的 Dropzonejs - 数据图像预览不起作用

Question

我最近搬到了 Brave 浏览器，并注意到 dropzonejs 上的预览生成存在问题（当 Brave 的“盾牌”功能仅打开时）。

当我检查生成的元素时，我看到 src 是这样的：src(unknown)当我在检查器中双击它时，src 属性是空的。

我有一个看起来像这样的自定义预览元素：

<div id="template" class="file-row">
    <!-- This is used as the file preview template -->
    <div>
        <span class="preview"><img data-dz-thumbnail/></span>
    </div>
    <div>
        <p class="name" data-dz-name></p>
        <strong class="error text-danger" data-dz-errormessage></strong>
    </div>
    <div class="file-upload-progress">
        <div class="ui progress active inverted hide file-progress">
            <div class="bar" data-dz-uploadprogress>
                <div class="progress"></div>
            </div>
            <div class="label">some default label</div>
        </div>
    </div>
    <div>
        <p class="size" data-dz-size></p>
    </div>
    <div class="file-actions">
        <button class="ui button green start">
            <i class="ui icon upload"></i>
            <span>start upload</span>
        </button>
        <button data-dz-remove class="ui button orange cancel">
            <i class="ui icon close circle"></i>
            <span>cancel upload</span>
        </button>
    </div>
</div>

生成的预览应该在<img data-dz-thumbnail/>元素上。

我也有一个自定义addedFile事件，但它不会影响 DOM，它只是更新一个计数器以订购多个图像并将 a 设置data-order为.file-row元素。我试图评论我的整体addedFile并没有改变

我根据引导示例进行了预览，并且预览在示例中效果很好。我也有一个非常相似的配置和代码。

// Get the template HTML and remove it from the document
let previewNode = document.querySelector("#template");
previewNode.id = "";
let previewTemplate = previewNode.parentNode.innerHTML;
let loadExistingImages;
previewNode.parentNode.removeChild(previewNode);

let myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
    url: url, // Set the url
    thumbnailWidth: 150,
    thumbnailHeight: 80,
    acceptedFiles: "image/jpeg,image/png",
    previewTemplate: previewTemplate,
    autoQueue: false, // Make sure the files aren't queued until manually added
    previewsContainer: "#previews", // Define the container to display the previews
    //clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
});

myDropzone.on("addedfile", function(file) {
    if(file.id) {
        $(file.previewTemplate).remove();
        file.previewTemplate = $("[data-old-order="+file.id+"]")[0];
        file.status = Dropzone.SUCCESS;
        myDropzone.files.push(file);
    } else {
        // Hookup the start button
        file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
        $(file.previewElement).data("order", fileOrder);
        $(file.previewTemplate).find('.file-progress').progress({
            percent: 0,
            text: {
                active: uploadingText,
                success: uploadSuccessText,
                error: uploadFailedText
            }
        });
    }
    fileOrder++;
});

我看不到任何会影响预览生成的东西，它在其他浏览器上运行良好。

你们中有人遇到过这种勇敢的问题吗？

标签： javascriptdropzone.jsbrave