图像未出现在 React JS 和 CSS 中答案

【问题标题】：Image doesn't show up in react JS and CSS图像未出现在 React JS 和 CSS 中
【发布时间】：2021-01-06 12:49:15
【问题描述】：

我在VSCODE 中编写了这段代码，我试图显示一个被剪裁为圆圈的图像，图像的溢出将被圆圈隐藏。但图像不显示。浏览器也不提供任何错误。图像路径是正确的，因为它不会引发任何错误。如果您需要任何进一步的信息，我会添加它们。

CSS

 .Pic {
    clip-path: circle(150px at center);
}

反应 JS

</section> 
<div classname ="Pic">
      <img  width = "150px" height ="150px" src={require("./Assets/profpicjpg.jpg")} alt="" ></img>
      </div>
</section>

【问题讨论】：

到目前为止我只找到了img的结束标签。试试这个并告诉我。
还有，类名。应该是类名
@Pretty_Girl : 已经更新了我的答案，还有一个错字..应该是 className 而不是 classname
您的 div 是一个块元素，图像位于左侧......远离您的 div 所看到的区域。给你的 div t& img 相同的图像宽度;) 或类似的东西：clip-path: circle(150px at left center); （剪辑一个 300px 的圆圈。

标签： css reactjs visual-studio-code

【解决方案1】：

将default 放在require 之后，如下所示：

<img  className="Pic"  width = "150px" height ="150px" src={require("./Assets/profpicjpg.jpg").default} alt="" ></img>

【讨论】：

1 类名 TO 类名。
2 将其添加到而不是
图片加载，但不裁剪成圆形
哈哈你可以试试set circle 50px ，因为圆和图片一样大，看不到。
剪辑路径：圆形（中心 50 像素）；

【解决方案2】：

您可以先import 图像，然后在img 标签内的src 属性中使用。

您的代码中还有一些拼写错误：

<section> 开口部分用作闭合部分。正确使用。
<img></img>（这是不对的）。 <img/>是未配对的元素，应该正确使用
类名也应该是className（驼峰式）

更新：

我刚刚注意到 clip-path 在 div 中的使用方式不正确，您需要先在父 div 元素上设置 height 和 width。

CODESANDBOX 演示： https://codesandbox.io/s/image-issue-yfrgf

更新的 CSS：

img {
  height: 150px;
  width: 150px;
}

.wrapper {
  height: 150px;
  width: 150px;
}

.Pic {
  clip-path: circle(75px at left center);
}

正确的代码是：

import MyImage from "./Assets/profpicjpg.jpg"; // make sure the relative path is correct

<section> 
      <div className="wrapper">
         <img  src={MyImage} alt="An Awesome Image"  className ="Pic"/>
      </div>
</section>

【讨论】：

图片加载，但不裁剪成圆形
您是否正确使用剪辑路径语法..检查一次:)