正如the Next documentation中所述： 注：Next.js仅提供构建时位于公共目录中的资产。运行时添加的文件不可用。我们建议使用第三方服务（如AWS S3）进行持久性文件存储。 因此，Next将<meta>标记视为动态内容，并且不做任何构建时转换，这导致图像不被使用。 要解决这个问题，您可以将图像上传到某个图像托管服务器（甚至是您自己的网站），获取此链接并将其放入og:image，或者您可以添加一个自定义webpack加载程序来处理图像导入，like this：
import imageUrl from './logo.png';
import websiteUrl from './constants';
// somewhere in the head component
<meta property="og:image" content={`${websiteUrl}${imageUrl}`} />
3条答案
按热度按时间nr7wwzry1#
对我来说，它终于奏效了：在_应用程序. js内部
则在返回中：
然后我做了一个静态导出并通过FTP从“out”文件夹上传了文件，因为我在一个非节点服务器上托管项目。要做到这一点，打开“package.json”并将“export”更改为“next build && next export”。然后在控制台中运行npm运行export，文件将被导出为html
7fyelxc52#
您可以在
<head>标记中使用此 meta标记请正确关闭标记中缺失的
"/>"meta标记。bis0qfac3#
正如the Next documentation中所述：
注：Next.js仅提供构建时位于公共目录中的资产。运行时添加的文件不可用。我们建议使用第三方服务（如AWS S3）进行持久性文件存储。
因此，Next将
<meta>标记视为动态内容，并且不做任何构建时转换，这导致图像不被使用。要解决这个问题，您可以将图像上传到某个图像托管服务器（甚至是您自己的网站），获取此链接并将其放入
og:image，或者您可以添加一个自定义webpack加载程序来处理图像导入，like this：这里，
websiteUrl指向您的生产网站的主机名，例如https://example.com。最后一个选项是添加
<img src="/logo.jpg" alt="" style={{ display: 'none'}} />，这可以确保Next在构建时处理您的图像，并且您可以将<meta property="og:image" content={websiteUrl + '/logo.jpg'} />添加到head中，好的方面是浏览器最初加载图像时不会将display设置为none。