下一个 js 中的图像答案

【问题标题】：Image in next js下一个 js 中的图像
【发布时间】：2021-11-12 19:23:17
【问题描述】：

我正在尝试简单地呈现我放置在我的 Next JS 项目的./public/assets/images 目录中的 PNG 图像。我也使用了next-images 包。但是，我仍然不断收到错误提示

./public/assets/images/delivery-boy.png
TypeError: unsupported file type: undefined (file: undefined)

这是我的那个组件的代码

import React from 'react'
import deliveryBoy from '../../../public/assets/images/delivery-boy.png'
import Image from 'next/image'

const MedicalStoreScreen = () => {
    return (
        <div className="med-store-screen" >
            <div className="section-title-container">
                <div className="heading">Medical Store</div>
                <div className="sub-heading">medicine home delivery</div>
            </div>
            <div className="med-store-info-container">
                <div className="img-container">
                    <img src={deliveryBoy} />
                </div>
                <div className="content-container">
                    <div className="content">24/7 Delivery in 30 minutes</div>
                    <div className="content">Upto 30% discount</div>
                </div>
            </div>
        </div>
    )
}

export default MedicalStoreScreen

这是我的next.config.js 文件的代码

const withImages = require('next-images')
module.exports = withImages()

有人可以建议在我的 Next JS 应用程序中渲染这个 PNG 图像时出了什么问题吗？

【问题讨论】：

为什么需要第三方包？我的意思是，如果你可以使用<Image /> provided by default，对你来说会更好。
是的，所以认为<Image/> 在最新的下一个 Js 版本中失败了，这就是为什么没有检测到 PNG 图像的原因。您可以在此处找到相同的解决方案 - stackoverflow.com/questions/68008498/…

标签： javascript reactjs typescript next.js png

【解决方案1】：

使用“img”时，您没有使用下一张图片

确保图片路径也正确。看起来问题可能是路径：“../../../public/assets/images/delivery-boy.png”。

您还应该使用 Image 而不是 img。像这样：

<Image
   className=""
   src={deliveryBoy} 
   width={10}
   height={10}
   alt=""
/>

您也可以通过添加这样的 URL 从云端或互联网调用图像：

<Image
       className=""
       src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" 
       width={10}
       height={10}
       alt=""
    />

不要忘记添加宽度、高度和 alt。您可以将“alt”留空。

【讨论】：

【解决方案2】：

试试

<div className="img-container">
  <img src="/assets/delivery-boy.png" />
 </div>

【讨论】：

试过了，没用。这是下一个js更新的问题。答案就在这里——stackoverflow.com/questions/68008498/…

【解决方案3】：

Next.js 不允许我们在.js 文件中导入任何图像，因此可以使用以下步骤在 Next.js 中渲染图像：

将您的图像保存或存储在public 文件夹下的某个位置（例如logo.png）
使用以下语法呈现图像：<img src="/public/images/logo.png" />。
- /public 表示该文件位于 pubic 文件夹内，前面不需要任何内容。
- /public/image 描述在公用文件夹中进入图片文件夹
- /public/image/logo.png 图片的完整路径。

如果您尝试将图像存储在 public 以外的任何其他文件夹中，它将不会呈现。

【讨论】：