下一个 js 中的图像

Posted 2023-03-28

【中文标题】下一个 js 中的图像

【英文标题】：Image in next 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 图像的原因。您可以在此处找到相同的解决方案 - ***.com/questions/68008498/…

【参考方案1】：

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

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

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

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

您也可以通过添加这样的 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”留空。

【参考方案2】：

试试

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

【讨论】：

试过了，没用。这是下一个js更新的问题。答案就在这里——***.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 以外的任何其他文件夹中，它将不会呈现。