我是使用 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 文件夹中调用它时失败了,有人可以帮我解决这个问题吗?

这就是我现在得到的:

javascript - 使用背景 : url() 时,图像不显示在 reactjs 中-LMLPHP

最佳答案

你可以试试这个

 <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/

10-12 12:20
查看更多