好吧,我有以下问题。我正在开发一个项目,我主要使用 HTML、CSS、SASS 和 JavaScript,并且也使用 Modernizr,因此当浏览器支持 webp 图像时可以加载它,如果不支持,则加载 jpg 图像。我正在使用 VisualStudio Code 和 Live Server 扩展,一切都很好。
The background image in the header as you can see, works fine
And this is other image below that it is added as a background image
这是用于图像的 SASS 文件中的代码:
.no-webp .inicio {
background-image: url(../../img/header.jpg);
.webp .inicio{
background-image: url(../../../build/img/header.webp);
当我使用 laragon 服务器打开项目时,我想将 PHP 添加到项目中时出现问题,图像没有出现。
Is like I didn't added any background image
我在浏览器的“网络”选项卡中查找了它,这就是我得到的:
我正在使用 Gulp.js
"devDependencies": {
"cssnano": "^5.0.5",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^8.0.0",
"gulp-cache": "^1.1.3",
"gulp-clean": "^0.4.0",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^7.1.0",
"gulp-notify": "^3.2.0",
"gulp-postcss": "^9.0.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-terser-js": "^5.2.2",
"gulp-webp": "^4.0.1",
"terser": "^5.3.8"
编辑:
我刚刚意识到这两个 webp 图像与其他正在工作的 webp 图像共享不同的路径。只是我用 CSS 添加为背景图像的那些。