React Material-UI 卡片图像组件

Question

显示图像时出现问题。看着documentation，我不知道我错过了什么。

我无法显示图像组件。

全部来自WhatsNew.js，我打个IG logo

import { ReactComponent as Instagram2 } from '../images/instagram2.svg'

下面我还调用了同一文件夹中的媒体文件，但我得到了一个无法正常工作的图像。

<CardMedia
  image='../images/blog-post-01.png'
  style={{height: 140}} />
<CardContent>

这是我的直播link and this is the repo GitHub

Answer 1

我觉得你现在做的是对的。您的图片 address/url 有误。我用互联网上的一张 url 图像试了一下，效果很好。

<Card>
  <CardMedia
    image="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&w=1000&q=80"
    style={{ height: 140 }}
  />
</Card>

在 URL 试试这个。可能有用。

image="/static/images/blog-post-01.png"

或导入图像

import blog from '../images/blog-post-01.png';

<CardMedia
        image={blog}
        style={{ height: 140 }}
      />

Answer 2

要显示的图像必须像这样作为对象给出：

<CardMedia
  image={Instagram2 }
  style={{height: 140}} />
<CardContent>

React Material-UI 卡片图像组件

React Material-UI Card Image Component

javascript

css

reactjs

react-component