Javascript 图像不'；使用background:url（）时，不会在reactjs中显示

我刚开始使用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;

您可以看到，在我的代码中，有两种方法可以调用映像。首先，我使用内联，正如您所看到的，我在使用外部资源url时成功调用了映像，但在尝试从我的

资产

文件夹调用时失败，有人能帮我解决这个问题吗

这就是我现在得到的：

---

我认为最有可能的原因是，一旦你的应用被捆绑，该路径上的图像就不可用了。如果您使用CRA（创建React应用程序）启动项目，请将图像文件放在

public/assets/client/al-bayan.png

文件夹中，并更新

url（/assets/client/al-bayan.png）的路径
您可以试试这个

 <div className="img-size" style={{ backgroundImage: `url(${"/assets/background/slide-4.png"})`}}></div>



或者使用本文提到的process.env.PUBLIC_URL


谢谢你的回答，但当我尝试这个时，还是失败了。。它应该可以工作-一旦它在公共目录中，您停止web服务器并再次启动它，您可以在浏览器中查看图像吗？然后您应该能够通过devtools使其在浏览器中工作，然后将结果复制到其他位置以作出反应。您是否尝试过使用引号中的url？例如：
背景图像：url（“/assets/client/al-bayan.png”）是的，我试过了，现在它工作了，我想知道为什么？是不是缓存，我真的不明白，我想这只是那些遗漏的引用。。与缓存无关谢谢你的回答，我尝试了你的代码，它显示了图像，但我想知道如何用这种样式添加更多属性？像在ReactJS中添加
width
inline一样，您可以查看此链接
 <div className="img-size" style={{ backgroundImage: `url(${"/assets/background/slide-4.png"})`}}></div>

 <div className="img-size" style={{ backgroundImage: `url(${"process.env.PUBLIC_URL/assets/background/slide-4.png"})`}}></div>