React and/or CSS 上的图像未出现

Question

我无法在我的注册页面中插入图片。我尝试使用 index.js（React 组件中的 HTML 代码）以及相应的 CSS 文件中插入它。两者都不工作。分享下面的代码和截图（我已经删除了不相关的导入代码）：

反应组件代码：

import styles from "./register.css";

    return(
        <div>
            <div id="styledImg">
                <img alt="" title="" src="../../src/assets/bocLogo.png"/>
            </div>
        </div>
    );
}

export default Register;

CSS代码：

#styledImg {
    width: 1110px;
    height: 428px;
    height: 428px;
    position: absolute;
    top: 245px;
    left: 87px;
}

#styledImg Img {
    max-width: 100%;
    max-height: 100%;
}

Answer 1

您必须将该图像作为 ReactComponent 上传。 import { ReactComponent as Logo } from "../../assets/your-image.png"; 所以应该看起来像：

import styles from "./register.css";
import { ReactComponent as Image } from "../../assets/your-image.png"

    return(
        <div>
            <div id="styledImg">
                <img alt="" title="" src={Image}/>
            </div>
        </div>
    );
}

export default Register;

Answer 2

您必须导入图像，然后将导入的文件用作src。应该是这样的。

import logo from '.../../src/assets/bocLogo.png';

然后您将在 src

中使用此徽标

<img src={logo} alt="Logo" />;

更多信息请查看This link

React and/or CSS 上的图像未出现

Image on React and/or CSS not appearing

javascript

css

image

background-image

reactjs