HTML 下载文件按钮仅保存为 HTML 文档

Question

我正在尝试向我的 gatsby 网站添加一个“下载文件”按钮，如下所示：

<a
    href="../../images/project-logos/placeholder-company-logo.png"
    download="test"
    className="responsive-square project-logo"
>
    <img
        src={
            props.logo ??
            require("../../images/project-logos/placeholder-company-logo.png")
        }
        alt="Company Logo"
        className="logo-img"
    />
</a>

该图像 100% 存在于该位置，因为它由正下方的 <img> 标记显示，但是当我单击它时，它会打开下载菜单，并且只允许我另存为类型：HTML 文档。如何让它识别出它是一个 png？

Answer 1

我不太熟悉（我假设是 Gatsby 特有的）require(...) 表达式作为 img src 属性。

话虽如此，这个sandbox 希望足以作为一个例子来解决您的问题。

基本功能如下所示：

  const [downloadUrl, setDownloadUrl] = useState(null);
  const downloadOnClick = () => {
    // Create a canvas element to "export" the image from
    const canvas = document.createElement("canvas");

    // set desired size of transparent image
    canvas.width = 200;
    canvas.height = 200;

    // extract as new image (data-uri)
    const url = canvas.toDataURL();
    setDownloadUrl(url);
  };

  ...
  
  <a
    onClick={() => downloadOnClick()}
    href={downloadUrl ?? "https://via.placeholder.com/200"}
    download="test"
    className="responsive-square project-logo"
  >

如需进一步阅读（以及此答案的依据），请查看此post。

希望这会有所帮助！

Answer 2

当您在 React 中处理图像源（以及由于 webpack 的配置而导致的 Gatsby）时，您应该将它们作为组件导入，并且导入的组件应该是源，例如：

// other imports
import MyImage from "../../images/project-logos/placeholder-company-logo.png"

const MyComponent = () =>{

return <a
    href="../../images/project-logos/placeholder-company-logo.png"
    download="test"
    className="responsive-square project-logo"
>
    <img src={props.logo && MyImage}
        alt="Company Logo"
        className="logo-img"
    />
</a> 
}

此外，在这种情况下，您的逻辑运算符应该是&&，因为它是一个布尔条件。你想打印props.logo（如果存在）。

更多关于importing images and assets with Gatsby的信息。