html - 显示图像时出现奇怪的错误

Question

使用 next.js 和 Tailwind，我试图在视口的右上角放置一个徽标，如果所述徽标只是一个文本，我会成功。

但是，每当我尝试使用img 或 svg标签显示徽标时，它根本不会显示。

更奇怪的是，如果我保留文本（'a' 标签），徽标会显示在下方。

我不知道我在这里错过了什么。

这有效（但我不想要文本）：

<div className="fixed top-0 right-0 p-4">
      <a className="transition duration-200 filter drop-shadow">
        luna
      </a>
      
      <img 
        alt="logo" 
        srcset="svg/logo_white.svg"/>
</div>

这不起作用（徽标不显示 - 我只删除了“a”标签）：

<div className="fixed top-0 right-0 p-4">
      <img 
        alt="logo" 
        srcset="svg/logo_white.svg"/>
</div>

我似乎无法绕过它。有人可以启发我吗？谢谢！

标签： htmlcssnext.jstailwind-css

Answer 1

请用这种方式

import Image from 'next/image'
<div className="fixed top-0 right-0 p-4">
     <Image src="svg/logo_white.svg" alt="logo" width="64" height="64" />
</div>