reactjs 图像不显示

Question

我有一个本地图像，我想把它放在我的内置 react 网页上。我看着这个，但它没有帮助我。我的代码如下：

const right={
    float:"right",
    fontSize:"18px"
}

export default class CloseUpCam extends Component {
render() {
    return (
        <div className="closeupcam" style={right}>
            <div>CLOSEUP CAMERA</div>
            <img src={require('./img/hand.png')} width="70" height="50" alt="cam"/>
        </div>
    )}}

没有错误信息。图片就是不显示。有谁知道出了什么问题？谢谢。

Answer 1

在反应中，您必须像所有其他文件一样导入图像文件

import Image from "./img/hand.png'

const right={
    float:"right",
    fontSize:"18px"
}

export default class CloseUpCam extends Component {
render() {
    return (
        <div className="closeupcam" style={right}>
            <div>CLOSEUP CAMERA</div>
            <img src={Image} width="70" height="50" alt="cam"/>
        </div>
    )}}

Answer 2

将图像放入react应用程序的public文件夹中并尝试

    const right={
        float:"right",
        fontSize:"18px"
    }

    export default class CloseUpCam extends Component {
    render() {
        return (
            <div className="closeupcam" style={right}>
                <div>CLOSEUP CAMERA</div>
                <img src="/imagename.jpg" width="70" height="50" alt="cam"/>
            </div>
        )}}

这是一个工作示例