CSS url找不到图片404Failed to load resource

代码结构

file

|-static

| |-image

| | |-1.jpg

| | |-2.jpg

| | |-3.jpg

| |-index.js

| |-style.css

|-template

| |-index.html

|-app.py

---

1.Google Chrome

Failed to load resource: the server responded with a status of 404 (NOT FOUND)

/*style.css*/ .slide:first-child { background: url('./static/image/1.jpg') no-repeat center center/cover; } .slide:nth-child(2) { background: url('./static/image/2.jpg') no-repeat center center/cover; } .slide:nth-child(3) { background: url('./static/image/3.jpg') no-repeat center center/cover; }

127.0.0.1/:93 GET http://127.0.0.1:5000/static/static/image/1.jpg 404 (NOT FOUND)

/*style.css*/ .slide:first-child { background: url(./image/1.jpg) no-repeat center center/cover; } .slide:nth-child(2) { background: url(./image/2.jpg) no-repeat center center/cover; } .slide:nth-child(3) { background: url(./image/3.jpg) no-repeat center center/cover; }

显示不出所有滚轮图(slide)

正常显示后文设置的多图组合(grid)

【解决办法】

清除浏览数据

2.Microsoft Edge 第二种写法

正常显示滚轮图

后文设置的多图组合

3.百度浏览器 第二种写法

正常显示滚轮图的第一张，但不能正常翻页

后文设置的多图组合没有效果

Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

参考博客：https://blog.csdn.net/tianlongtc/article/details/80230761

不过这好像不是我的问题所在

【滚轮图 · 解决办法】

//index.js "use strict"; //add let slideInterval;

参考博客：https://www.cnblogs.com/lydiawork/p/7808542.html

【多图组合 · 解决办法】

查了一下，感觉可能是浏览器对CSS grid的支持程度不一样造成的

刚开始用 grid

分享一篇大神笔记：https://www.zhangxinxu.com/wordpress/2018/11/display-grid-css-css3/

---

『滚轮图显示效果图』 『多图组合效果图』