reactjs 图像不显示

Question

我有一个本地镜像，我想把它放在我的内置 react 网页上。我看了this但这对我没有帮助。我的代码如下:

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

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

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>
    )}}