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

Posted 2023-03-07

【中文标题】显示图像时出现奇怪的错误

【英文标题】：Weird bug when displaying image

【发布时间】：2021-08-27 06:28:43

【问题描述】：

使用 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 
         
        srcset="svg/logo_white.svg"/>
</div>

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

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

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

【问题讨论】：

它的类而不是className，它的src而不是srcset。

@Grumpy 在反应中实际上是className。对于img 标签srcset 工作正常

检查您的path to image file 是否正确，因为我发现img 标签本身没有问题。

'className' 在 React/Next.js 中使用，但两者都是正确的。路径也是正确的，因为正如我所说，图像会在后面跟着一些文本时显示。

【参考方案1】：

请这样使用

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

【讨论】：

nextjs.org/docs/basic-features/static-file-serving

这行得通！非常感谢！您能否详细说明为什么我应该使用“图像”组件而不是经典的 html 处理方式？

基本上，这是下一个元素，而不是 HTML img 标签