Question

我一直在寻找一种方法将普通图像文件插入到官方文档的Material-UI AppBar中，但似乎可以放在AppBar中的唯一非文本内容是文本图标或SVG图标。有没有办法在AppBar中显示实际图像？

Answer 1

我不确定您希望如何在AppBar中使用图片，但可以在<img>和iconElementLeft道具中添加iconElementRight元素。

以下是一个示例：http://www.webpackbin.com/4ys7V4W3b

Answer 2

为 Material-UI AppBar 插入背景图片有多种选择。

这是我更喜欢的一种：

导入图片：

import headerBackground from "../../Assets/headerBackground.png";

将图片添加到样式表中，如下所示：

header: {
  backgroundImage: `url(${headerBackground})`,
},

设置类组件：

const classes = useStyles();

return (
 <>
   <AppBar className={classes.header}> ... </AppBar>

这是一个完整的例子：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { AppBar, Toolbar, Typography } from "@material-ui/core";

import headerBackground from "../../Assets/headerBackground.png";
const useStyles = makeStyles((theme) => ({
  header: {
    backgroundImage: `url(${headerBackground})`,
  },
}));

export default function Header(props) {
  const classes = useStyles();

  return (
    <AppBar className={classes.header}>
      <Toolbar>
        <Typography variant="h6">Scroll to Hide App Bar</Typography>
      </Toolbar>
    </AppBar>
  );
}

Answer 3

材料UI包含一些组件，在其中可以分配给图像的属性。例如CardMedia-图像的属性。但是您也可以使用标准标签插入图像。

            <AppBar position="static" color="default" elevation={0} className={classes.appBar}>
                <Toolbar className={classes.toolbar}>
                    <img src="/assets/logo.svg" />
                    <nav>
                        <Link variant="button" color="textPrimary" href="#" className={classes.link}>
                            About
                        </Link>
                    </nav>
                </Toolbar>
            </AppBar>

对我有用。

将图像插入Material-UI AppBar

3 个答案: