为啥我在材料-ui-v3.2.0“图像头像”示例中看不到图像

Posted 2023-02-22

【中文标题】为啥我在材料-ui-v3.2.0“图像头像”示例中看不到图像

【英文标题】：Why I cant see image in the example of material -ui-v3.2.0 "Image avatars "为什么我在材料-ui-v3.2.0“图像头像”示例中看不到图像

【发布时间】：2019-03-15 01:47:54

【问题描述】：

此示例“图像头像”https://material-ui.com/demos/avatars/ 来自material-ui v3.2.0 网站，但不知何故我在实施时看不到图像。

为什么我在material -ui-v3.2.0的例子中看不到图片“图片 头像”？

在示例'icon avatars' 和'Letter avatars' 中，我可以看到图像。我使用create-react-app 'react-scripts': '^2.0.4', but also tried on 'react-scripts': '^1.1.5'，但没有任何效果。

PFB 下面的代码：

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import  withStyles  from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';

const styles = 
  row: 
    display: 'flex',
    justifyContent: 'center',
  ,
  avatar: 
    margin: 10,
  ,
  bigAvatar: 
    width: 60,
    height: 60,
  ,
;

function ImageAvatars(props) 
  const  classes  = props;
  return (
    <div className=classes.row>
      <Avatar  src="/static/images/remy.jpg" className=classes.avatar />
      <Avatar
        
        src="/static/images/uxceo-128.jpg"
        className=classNames(classes.avatar, classes.bigAvatar)
      />
    </div>
  );


ImageAvatars.propTypes = 
  classes: PropTypes.object.isRequired,
;

export default withStyles(styles)(ImageAvatars);

【参考方案1】：

您需要导入它。只是将路径直接传递给 src 是行不通的。下面是在 react 中渲染图片的两种方式

使用导入

import uxceo from "/static/images/uxceo-128.jpg";
import remy from "/static/images/remy.jpg";

<Avatar  src=remy className=classes.avatar />
<Avatar
    
    src=uxceo
    className=classNames(classes.avatar, classes.bigAvatar)
  />

或使用要求

<Avatar  src=require("/static/images/remy.jpg") className=classes.avatar />
<Avatar
    
    src=require("/static/images/uxceo-128.jpg")
    className=classNames(classes.avatar, classes.bigAvatar)
  />

【讨论】：

只是为了添加，他可能还需要将 file-loader 添加到他的 webpack 配置中以使导入工作。

@Will 看起来他使用 create-react-app 创建了应用程序。那么我们还需要 webpack 吗？它们不是由 create-react-app 预先配置的吗？

一切正常。非常感谢您的快速回复。

@Роман 不客气 :) 请点赞并接受答案，以帮助未来的读者