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中的'http://[refId].cloudfront.net/myVideo.mp4' \ pages'在'C：\ Users \ David \ Documents \ wamp \ www \ greystone \ src \ pages'中解析'http://[refId].cloudfront.net/myVideo.mp4'，解析的请求是使用描述文件的模块：C：\ Users \ David \ Documents \ wamp \ www \ greystone \ package.json（相对路径：./ src / pages）字段“浏览器”不包含有效的别名配置，解析为模块C：\ Users \ David \ Documents \ wamp \ www \ greystone \ src \ pages \ node_modules不存在或不是目录

因此，盖茨比正试图将导入解密为一个模块。

我在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。

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

1 个答案: