将图像作为对象[重复]答案

【问题标题】：Getting image as an object [duplicate]将图像作为对象[重复]
【发布时间】：2022-01-02 14:41:45
【问题描述】：

import React from 'react';
import styles from './Home.module.css';
import information from '../../images/information.png'


const Home = () => {

    return (
        <div>
            <div className={styles.info}>
                <div className={styles.informationCard}>
                    <img src={information} alt="" className={styles.informationImg}/>
                    <h3>Find all the information you need!</h3>
                </div>
            </div>
        </div>

    )
}

export default Home

我已经在下一个 js 中导入了我想要的图像作为信息，但是当我将它用作 src 时，我没有得到图像。导入文件/文件夹一切都是正确的，但是当我使用它时它会返回 <img src="[object Object]"> 而不是图像。我该怎么办？

【问题讨论】：

标签： reactjs image object next.js

【解决方案1】：

使用 nextJs，您必须考虑 nextJs 如何提供文件。

我建议您查看文档的以下页面：

https://nextjs.org/docs/basic-features/static-file-serving

在您的情况下，图像必须存储在公共文件夹中，您只需链接到“/information.png”即可访问它

【讨论】：

是的，没错！非常感谢！

【解决方案2】：

将images 文件夹和image 移动到Next.js 的public 文件夹中：
images/information.png => public/images/information.png

然后你可以像这样把图片路径放在src中：

<img src="images/information.png" alt="" className={styles.informationImg}/>

您不需要在 src 中写入 /public/。你也不需要导入你的图像。

【讨论】：