下一个js中的图像

Question

我正在尝试简单地渲染一个 PNG 图像，该图像已放置在我的 Next JS 项目的

./public/assets/images

目录中。 我已经使用了

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 图像时出了什么问题吗？

Answer 1

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

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

您还应该使用图像而不是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”留空。

Answer 2

Next.js 不允许我们导入

.js

文件中的任何图像，因此可以使用以下步骤在 Next.js 中渲染图像：

1. 将图像保存或存储在

   public

   文件夹下的某个位置（例如

   logo.png

   ）
2. 使用以下语法渲染图像：

   <img src="/public/images/logo.png" />

   。

   • /public

     表示该文件位于公用文件夹内，前面不需要有任何内容。

   • /public/image

     描述在公共文件夹中转到图像文件夹

   • /public/image/logo.png

     图像的完整路径。

如果您尝试将图像存储在除 public 之外的任何其他文件夹中，它将不会渲染。

Answer 3

对于普通图像，您可以使用 img 标签，但由于 Next js 提供图像优化，请使用 next 中的图像标签并提供尺寸

Answer 4

如果您的图像位于公共文件夹中，这将起作用。

“public”目录中的图像不需要导入，因为下一步会将其作为公共 URL，并且您可以使用以下方法访问该图像。

<Image
   className=""
   src="/assets/images/delivery-boy.png" 
   width={10}
   height={10}
   alt=""
  />