我是使用 reactjs 的新手,我很困惑为什么图像没有出现在我的代码中。我正在使用 background: url()
,所以我更容易处理。我可以成功添加图像,因为控制台中没有错误但没有显示任何内容。有人可以帮我解决这个问题吗?
这是我的组件代码:
import React from "react";
// CSS
import './klien.css'
const Klien = () => {
return (
<div className="klien">
<div className="klien-container">
<p className="section-title">Klien Kita</p>
<div id="klien" className="carousel slide" data-ride="carousel">
<div className="carousel-item active">
<div className="row text-center mr-auto ml-auto">
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size-1"></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"../../../assets/background/slide-4.png"})`}}></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://upload.wikimedia.org/wikipedia/en/thumb/1/12/Grab_%28application%29_logo.svg/800px-Grab_%28application%29_logo.svg.png"})`}}></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://upload.wikimedia.org/wikipedia/en/thumb/1/12/Grab_%28application%29_logo.svg/800px-Grab_%28application%29_logo.svg.png"})`}}></div>
</div>
</div>
</div>
</div>
<div className="carousel-item">
<div className="row text-center">
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default Klien;
这是我的CSS:
.klien{
background-color: #f6f7fd;
min-height: 50vh;
max-height: 70vh;
overflow: hidden;
}
.klien .klien-container{
/* overflow: hidden; */
padding-top: 10vh;
}
.klien .section-title{
color: #1c2331;
font-size: 3em;
font-weight: 500;
text-align: center;
}
.klien .card-center{
margin: 0% auto;
}
.klien .text-center{
text-align: center;
width: 100vw;
}
.klien .card-size{
max-height: 20vh;
}
.klien .mask{
background-color: rgba(246, 247, 253, 0.5);
}
.klien .img-size{
width: 10vw;
height: 10vh;
margin: 0 auto;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.klien .img-size-1{
background: url(../../../assets/client/al-bayan.png);
width: 100px;
height: auto;
}
.design-pakaian .btn-center{
margin-left: auto;
margin-right: auto;
}
您可以看到在我的代码中有两种方法可以首先调用图像 我正在使用内联,如您所见,我在使用外部资源 url 时成功调用了图像,但是尝试从我的
assets
文件夹中调用它时失败了,有人可以帮我解决这个问题吗?这就是我现在得到的:
最佳答案
你可以试试这个
<div className="img-size" style={{ backgroundImage: `url(${"/assets/background/slide-4.png"})`}}></div>
或使用 process.env.PUBLIC_URL 如此 doc 提到
<div className="img-size" style={{ backgroundImage: `url(${"process.env.PUBLIC_URL/assets/background/slide-4.png"})`}}></div>
关于javascript - 使用背景 : url() 时,图像不显示在 reactjs 中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57872345/