Question

我有一个本地图像，我想将其放置在我的内置网页中。我看着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

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

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应用的公共文件夹中，然后尝试

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

这是工作中的sample

Answer 3

您的显示图像方式实际上在React中起作用，我认为这与图片的路径有关。您是否将所有静态文件都放在公用文件夹下，或者如何管理静态页面？

<img src={require('./img/hand.png')} width="70" height="50" alt="cam"/>

Answer 4

将图像放入您的公共文件夹中。

reactjs图像未显示

4 个答案: