下一个js中的图像

Question

我正在尝试简单地呈现一个PNG图像，它是我在下一个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()

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

Answer 1

尝试使用

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