Question

我有一个简单的HTML文件。我正在尝试将可下载的图像文件放在HTML上。为此，我使用了代码here。

我的代码如下：

<!DOCTYPE html  >
<html lang="en" style="background:  #fffff0;">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >
    <div style="padding-left: 400px;padding-top: 200px;padding-right: 400px;"><p style="    line-height: 130%; padding-left: 10px;padding-top: 10px;padding-right: 10px;padding-bottom: 10px;background: white; border-radius: 15px; border-style: groove"><b>Aufgabe 3</b><br><br>

some text....
<br><br>

<a href="Hoffest.jpg" download="Hoffest.jpg">
  <img src="Hoffest.jpg" width="150" height="120">
</a>

<br><br>

some more text...
<br><br><button type="button" id="weiter" value="weiter"  style="font-size : 26px; width: 9%; height: 36px; border-radius: 7px"
                 onclick="window.location.href='{{ url_for( 'test' ) }}'">weiter</button></p></div>
</body>
</html>

打开html文件时，我还可以看到一些文本和图像视图。当我单击图像时，我希望它像上面的链接一样被下载。但只需单击一下，即可在同一选项卡上打开此图像文件，与我的html文件不同。我也尝试用按钮来做。因此，我放置了<img src="Hoffest.jpg" width="150" height="120">而不是<button>Download Image</button>。同样的事情发生了。当我单击按钮时，它只是在同一选项卡上打开了图像，而没有下载它。我在做什么错了？

Answer 1

根据您对我的评论的回答，我假设您正在通过在浏览器中打开HTML文件直接尝试此操作。

download属性对原点有严格的限制。它必须相同（blob:和data:方案除外），但是如果您直接打开文件（使用file://），则它也将不起作用

您可以做的是运行本地HTTP服务器（我个人使用的是npm软件包http-server，或者您可以运行经典的Web服务器，例如Apache或Nginx），并使用HTTP通过服务器访问文件协议。

为什么我的下载属性不起作用？

1 个答案: