为什么我的图片没有显示在我的域中（我使用 directAdmin）？

Question

我将我的网站代码转移到我的域中，但我不知道为什么我的图片没有显示在右侧。我把我的图片放在 index.html 旁边，所以我使用了相对寻址：

在我的 directAdmin 上：

index.html:

注意.right：background-image: url("IMG_۲۰۲۲۰۴۰۲_۱۲۲۲۳۰.png");：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Arman Ebrahimi</title>
    <style>
      *{
    box-sizing: border-box;
}
body{
    background-image: linear-gradient(to right, #333, #ccc);
    margin: 0;
    padding: 40px 60px 0 60px;
    height: 100vh;
}
.container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}
.left{
    width: 70%;
    height: 80%;
    background-color: gold;
    position: relative;
    border-radius: 10px 0 0 0;
    color: #333;
}
.country{
    margin-left: 40px;
}
h1{
    font-size: 50px;
    font-family: "Times New Roman";
    letter-spacing: 3px;
}
.description{
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.right{
    background-image: url("IMG_۲۰۲۲۰۴۰۲_۱۲۲۲۳۰.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 150%;
    width: 30%;
    height: 80%;
    background-color: #555;
    position: relative;
    border-radius: 0 10px 0 0;
}
.menu{
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 10px;
}
.menu > a{
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    color: white;
    transition: 0.5s;
    border-radius: 10px;
}
.menu > a:hover{
    background-color: gold;
}
.dropdown{
    padding: 5px 10px;
    border-radius: 10px;
    display: inline-block;
    transition: 0.5s;
}
.dropdown:hover{
    background-color: gold;
}
.dropbtn{
    background-color: inherit;
    border: none;
    color: white;
    font-size: inherit;
}
.dropdown-content{
    background-color: #eee;
    visibility: hidden;
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
}
.dropdown-content a{
    display: block;
    width: 100%;
    font-size: 14px;
    color: #222;
    padding: 10px 40px 10px 10px;
    text-decoration: none;
}
.dropdown-content a:hover{
    background-color: gold;
}
.dropdown:hover .dropdown-content{
    visibility: visible;
}
.footer{
    width: 100%;
    height: 15%;
    background-color: #222;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.footer a{
    display: inline-block;
    text-decoration: none;
    color: white;
}
.footer a:hover{
    color: gold;
}
.footer2{
    width: 100%;
    height: 5%;
    background-color: gold;
}
    </style>
</head>
<body>
<div class="container">
    <div class="left">
        <p class="country">Iran</p>
        <div class="description">
            <h1>ARMAN <br> EBRAHIMI</h1>
            <p>//about me <br><br>I'm a Front-end(Reactjs) developer.
                <br><br>I'm looking for a remote job. I'm from Iran-Birjand.</p>
        </div>
    </div>
    <div class="right">
        <div class="menu">
            <a href="#">About</a>
            <a href="#">Blog</a>
            <div class="dropdown">
                <button class="dropbtn">Resources
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="#">project1</a>
                    <a href="#">project2</a>
                    <a href="#">project3</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Features
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="#">Skills</a>
                    <a href="#">Favorites</a>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <a href="#">Instagram</a>
        <a href="#">Google</a>
        <a href="#">Linkedin</a>
        <a href="https://github.com/ar18313731">Git</a>
    </div>
    <div class="footer2"></div>
</div>
</body>
</html>

这是我的域名：

http://armaneebrahimi.ir/

当我使用绝对寻址时，结果是：

Answer 1

当我使用完整的 URL:

时它对我有用

.right{
    width:300px;
    height:300px;    
    background-image: url("https://armaneebrahimi.ir/IMG_%DB%B2%DB%B0%DB%B2%DB%B2%DB%B0%DB%B4%DB%B0%DB%B2_%DB%B1%DB%B2%DB%B2%DB%B2%DB%B3%DB%B0.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 150%;
    background-color: #555;
    position: relative;
    border-radius: 0 10px 0 0;
}

 <div class="right"></div>

为什么我的图片没有显示在我的域中（我使用 directAdmin）？

Why my image not displayed in my domain(I use directAdmin)?

hosting

relative-path

background-image

directadmin