将徽标图像放入导航栏

Question

将徽标放到导航栏中时，我的图像破碎了。我将其保存在本地的公用文件夹中。

我尝试通过传递作为道具，并直接链接到路径，但是我似乎无法使其正常工作。

import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import Typography from '@material-ui/core/Typography'
const NavBar = () => {
  return(
    <div>
      <AppBar className='nav-bar' position="static" color='white'>
        <Toolbar>
          <Typography variant="title" >
          <img src='../../public/LQ_Logo.png' width={182} height={64} />
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  )
};
export default NavBar;

我需要将徽标显示在导航栏的左上角

Answer 1

对于data(iris) iris$years <- floor(runif(nrow(iris), min=0, max=5)) # edited the years column iris nested_iris <- iris %>% group_by(Species, years) %>% nest(.key = "data") %>% mutate( virginica_Q = map(data, ~select(.x, Sepal.Length, Sepal.Width)) %>% map(., ~mutate(.x, Q_vir_sep_len = ntile(Sepal.Length, 4))), Setosa_Q = map(data, ~select(.x, Sepal.Length, Sepal.Width)) %>% map(., ~mutate(.x, Q_set_sep_len = ntile(Sepal.Length, 4))) ) nested_iris 文件夹中的nested_iris <- iris %>% group_by(Species, years) %>% nest(.key = "data") %>% mutate( ALL_QUANTILES = map(data, ~select(.x, Sepal.Length, Sepal.Width)) %>% map(., ~mutate(.x, myQuantiles = ntile(Sepal.Length, 4))), ) ，请使用指向img的相对路径。

对于Public，请使用Public。

此外，如果它是public/Vector.png，则可以将其导入为./Vector.png，例如：

SVG

演示：

Answer 2

您检查相对路径是否正确？也许“ ../../public/LQ_Logo.png”中缺少某些内容。

您可以尝试使用此替代方法：

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);

将png图像更改为svg（最好增加Web的宽度/高度），然后将图像导入为组件并在代码中调用该组件。