在页面构建时将资产从 CDN 导入 Gatsby

Question

我想将资产（视频）从 CDN (AWS CloudFront) 导入 Gatsby 中的特定页面。我不知道该怎么做。

我尝试在页面顶部添加一个 import 语句，该语句引用资产的链接，即：http://[refId].cloudfront.net/myVideo.mp4。当我这样做并运行gatsby develop 时，我得到This dependency was not found 并引用了链接。

当我运行gatsby build 时，我收到以下错误：

错误：./src/pages/index.js 未找到模块：错误：无法解析 'C:\Users\David\Documents\wa mp\www\greystone\src\pages 中的 'http://[refId].cloudfront.net/myVideo.mp4' ' resolve 'http://[refId].cloudfront.net/myVideo.mp4' in 'C:\Users\David\Documents\wamp\www\greystone\src\pages' 解析的请求是一个使用描述文件的模块：C:\Users\David\Documents\wamp\www\ graystone\package.json（相对路径：./src/pages）字段“浏览器”不包含有效的别名配置解析为模块 C:\Users\David\Documents\wamp\www\greystone\src\pages\node_modules不存在或不是目录

所以 Gatsby 正试图将导入解读为一个模块，它出现了。

我在 Gatsby Docs 中找到了此页面，Importing Assets Directly Into Files，但没有提及如何使用 CDN 进行此操作。

单独的导入链接，当放置在浏览器地址栏中时有效，但当尝试以这种方式将资产导入页面时，Gatsby 无法构建/编译。

import myVideo from 'http://[refId].cloudfront.net/myVideo.mp4'

export default (props) => (
    ...
    <video src={myVideo}></video>
    ...
)

我希望将 URL 转译/编译成静态 HTML。

Answer 1

也许你可以直接在你的组件中使用 url：

export default (props) => (
    ...
    <video src="http://[refId].cloudfront.net/myVideo.mp4"></video>
    ...
)

如果您想存储视频并通过 Gatsby 提供，请查看来自 gatsby-source-filesystem 的帮助函数 createRemoteFileNode。