简体   繁体   English

使用 next.js 图像标签时图像不呈现

[英]image doesn't render when using next.js Image tag

I have an image located in the public/img directory.我有一个位于public/img目录中的图像。 I want to render it using the next.js built-in <Image/> tag.我想使用 next.js 内置<Image/>标签来渲染它。

here is the code I have written:这是我写的代码:

     <Image
                onClick={hideModal}
                alt="close_button"
                src="/img/close_button.png"
                width="20px"
                height="20px"
              />

but nothing is shown on the page (not even the alt-text).但页面上没有显示任何内容(甚至没有替代文本)。

the thing is when I use the <img/> tag, it works as expected but with the <Image/> , it doesn't问题是当我使用<img/>标签时,它按预期工作,但使用<Image/>时,它不会

doest need add img folder just add /close-button.png不需要添加 img 文件夹只需添加 /close-button.png

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Next.js 13 remotePatterns 的 next.config.js“端口”属性不适用于图像组件 - Next.js 13 next.config.js "port" attribute for remotePatterns doesn't work for Image component 我用的是<img>使用图像链接在 Next.js 中标记,它显示错误 - I was using a <Image /> tag in Next.js using a link of an image and it was showing an error Next.js 链接不会在页面滚动到顶部时呈现 - Next.js link doesn't render with page scrolled at the top 在 Netlify 上部署 next.js 时无法解决此错误。 导入的图像和标签引发错误 - Can't solve this error in next.js Deploying on Netlify. Imported Image and tag throwing the error 将 Next.js 与 next-redux-wrapper 一起使用时,getInitialProps 似乎不起作用 - getInitialProps doesn't seem to work when using Next.js with next-redux-wrapper 我无法引用 Next.js 中的图像 - I can't reference an image in Next.js 单击时是否可以在 next.js 图像上添加旋转 animation? - Is it possible to add a rotate animation on an next.js image when clicked? Next.js 链接不强制组件渲染,serverSideProps 不更新 - Next.js Link doesn't enforce component render, serverSideProps doesn't get updated 使用 Next.js 中同一文件夹中的图像 in.md 文件 - using image in .md file from the same folder in Next.js 使用 Tailwind 和 Next.js 的图像的动态高度 - Dynamic height for an image using Tailwind and Next.js
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM