[Bug Report]Image 组件图片预览中的按钮无法成功下载图片

[GloriaQu]

Environment

edge

Reproduction link

https://run.iviewui.com/Hpkl8von

Steps to reproduce

点击图片预览，点击下载

What is expected?

下载图片

What is actually happening?

发送了fetch请求，但没得到图片

[dosubot]

@GloriaQu Hello there! I'm a bot designed to help you solve bugs, answer questions, and become a contributor. I'm here to assist you while waiting for a human maintainer.

The downloadFile function used in the Image component relies on the fetch API to download the image. If the fetch request is sent but the image is not downloaded, there could be several reasons for this issue. Here are a few things to check:

1. CORS Issues: Ensure that the server hosting the image allows cross-origin requests. If the server does not include the appropriate CORS headers, the fetch request may fail.

2. URL Validity: Verify that the URL being fetched is correct and accessible. You can try opening the URL directly in the browser to see if the image loads.

3. Blob Conversion: Ensure that the response from the fetch request is correctly converted to a blob. If the response is not a valid image, the blob conversion will fail.

4. Edge Compatibility: Although the fetch API and URL.createObjectURL are standard web APIs, there might be browser-specific issues. Testing the functionality in different browsers can help identify if the issue is specific to Microsoft Edge.

Here is the downloadFile function for reference:

export async function downloadFile(url, name = 'unnamed') {
    if (!isClient) return Promise.reject();
    try {
        const res = await fetch(url);
        const blob = await res.blob();

        if (!blob) return Promise.reject();

        const localUrl = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.setAttribute('href', localUrl);
        a.setAttribute('download', name);
        a.click();
        URL.revokeObjectURL(localUrl);
        return Promise.resolve();
    } catch(e) {
        return Promise.reject(e);
    }
}

Additionally, the Image component provides the onOnLoad and onOnError events that can be used to debug the download process:

export declare const Image: DefineComponent<{
    // ... other properties

    /**
     * 图片加载成功
     */
    onOnLoad?: (event?: any) => any;

    /**
     * 图片加载失败
     */
    onOnError?: (event?: any) => any;

    // ... other properties
}>

You can use these events to log any errors or successful loads to help debug the issue further ^[1][2].

To continue talking to Dosu, mention @dosu.