如何使用css将图像背景设置为div

Question

由于某种原因，图像背景没有出现在我的div上。

css：

.loading-on {
    background-image: url('./assets/images/app-loader-on.png');
}

html：

<div className={`loading loading-on`}></div>

映像没有加载，而当我检查元素时，div有src作为url(‘/app-加载程序-on.8e87a389.png’)，因此添加了一些散列。

package.json

{
  "name": "app-article",
  "version": "0.1.0",
  "dependencies": {
    "js-cookie": "^2.2.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-image-lightbox": "^5.1.0"
  },
  "scripts": {
    "start": "parcel src/index.html -p 8000",
    "build-user": "yarn --cwd '../../packages/user' build-npm",
    "build": "yarn build-user && yarn clean && yarn install && parcel build src/index.html --no-cache && cp src/xd_receiver.html ./dist && cp src/ads.txt ./dist",
    "clean": "rm -rf .cache dist node_modules"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-0",
    "@babel/plugin-proposal-class-properties": "^7.5.5"
  }
}

这是否意味着在构建应用程序之后只会出现图像，那么开发模式呢？

Answer 1

尝试另一个图像、大小和重复选项：

background-repeat:no-repeat; 
background-size:contain; 
height:200px;width:1200px;