Next.js 没有显示 svg 图像，尽管它在 public 目录中

Question

我正在使用 Next.js，我在 public 目录中有几个 SVG 文件：

/public/branding/logo.svg
/public/branding/brand.svg
/public/branding/slogan.svg

我正在使用 img 标签加载它们：

<img src='/branding/logo.svg' />

但是，图像未显示。但我可以在 Google Chrome 的 Dev Tools 中右键单击图像 src 并在新选项卡中打开 SVG 并查看其内容。

虽然我看到了这条消息：

This XML file does not appear to have any style information associated with it. The document tree is shown below.

怎么了？

Answer 1

问题正是浏览器消息：

This XML file does not appear to have any style information associated with it. The document tree is shown below.

如果 nextjs 不显示您的 SVG 图片，请先在浏览器中打开该 SVG（例如 Chrome）。如果它向您显示该消息，则 SVG 有问题。用另一个 SVG 替换它，它应该可以工作。它对我有用。

所以，我们可以说 nextjs 只显示浏览器可以呈现的有效 SVG 文件。不过我花了几天时间才解决。

Next.js is not showing the svg image, though it's in the public directory