如何在ReactJS中使用CSS显示图像？

问题描述

将图像导入src文件夹后，我尝试使用以下代码。但是我看不到图像显示出来。如何解决这个问题？

我的React代码是这个。

import React from 'react'
import burgerlogo from '../../assets/images/burger-logo.png'
import classes from './logo.module.css'

const logo=(props)=>(
    <div className={classes.logo} style={{height:props.height}}>
        <image src={burgerlogo} alt="MyBurger"/>
    </div>

);

export default logo;

我的CSS代码是这个。

.logo{
    background-color: white;
    padding: 8px;
    height: 100%;
    Box-sizing: border-Box;
    border-radius: 5px;
}

.logo img{
    height: 100%;
}

解决方法

您可以将标签image更改为img

    <image src={burgerLogo} alt="MyBurger"/>

到

    <img src={burgerLogo} alt="MyBurger"/>

如果导入import burgerLogo from '../../assets/images/burger-logo.png'不正确，则会出现错误，因此这对您来说不是问题。

只是要指出用户定义的组件应该以大写字母开头。

当元素类型以小写字母开头时，它指的是内置组件（例如或），并导致字符串“ div” 或“ span”传递给React.createElement。以a开头的类型大写字母，例如编译为React.createElement（Foo）和对应于在JavaScript文件中定义或导入的组件。

我们建议使用大写字母命名组件。如果你有一个以小写字母开头的组件，请将其分配给在JSX中使用大写变量之前。

来自ReactJS docs

回到您的问题

如何在ReactJS中使用CSS显示图像？

您可以使用CSS background-image属性来实现。

将图像burger-logo.png放在public文件夹中（您可以根据需要更改位置，例如：在img或资产文件夹中）。

在您的CSS中像这样使用

.Logo {
    background-color: white;
    background-image: url('./burger-logo.png');
    padding: 8px;
    height: 100%;
    box-sizing: border-box;
    border-radius: 5px;
}

假设您的资产文件夹位于公用文件夹内，请按照以下步骤操作： <img src='./assets/images/burger-logo.png' alt="MyBurger"/> 如果不起作用，请尝试此 <img src='./images/burger-logo.png' alt="MyBurger"/> 这实际上取决于图像的路径。

根据您的React设置，图像的src可能会有所不同。

您可以尝试像这样更改图像文件的位置吗？

import burgerLogo from './burger-logo.png'

如果将Webpack设置为在某个文件夹中查找.png个文件，它将自动从该文件夹中拾取该文件，并将正确的文件位置附加到幕后。

PS。您在控制台中看到任何错误吗？

reactjs reactjs