求助：MUI Select组件中Avatar无法正常显示

核心问题 #

你代码里的Avatar组件用了url属性，但MUI的Avatar组件并不支持这个属性，正确指定图片源的属性是src，这是图片无法显示的直接原因。

修复步骤 #

1. 修正Avatar的图片源属性
   把<Avatar url={item.image} alt="food" />改成<Avatar src={item.image} alt="food" />，本地静态资源确保路径格式正确（比如/static/logo7.png），远程图片要能正常访问。

2. 优化MenuItem布局
   当前代码里Stack、Checkbox、ListItemText是平级结构，容易导致布局错乱，建议把所有元素放到同一个Stack容器中，保证排版对齐，避免Avatar被挤压或遮挡：

修改后的完整代码 #

<FormControl sx={{ width: "27.5rem" }}>
    <InputLabel id="demo-multiple-checkbox-label">Tag</InputLabel>
    <Select
      labelId="demo-multiple-checkbox-label"
      id="demo-multiple-checkbox"
      multiple={true}
      value={valueTag}
      onChange={(e) => handleChange(e)}
      input={<OutlinedInput label="Tag" />}
      renderValue={(selected) => selected.join(", ")}
      MenuProps={MenuProps}
    >
        {listFoodSelectbox.map((item) => (
          <MenuItem key={item.id} value={item.name}>
              <Stack direction="row" spacing={2} alignItems="center">
                  <Avatar src={item.image} alt="food" />
                  <Checkbox checked={valueTag.indexOf(item.name) > -1} />
                  <ListItemText primary={item.name} />
              </Stack>
          </MenuItem>
        ))}
    </Select>
</FormControl>

额外检查 #

• 确认item.image的路径或URL有效，若图片加载失败，Avatar会显示alt文本或默认图标，可通过sx属性自定义默认样式。

内容的提问来源于stack exchange，提问作者MinhT11