学习问题--js图片路径加载问题

时间:2024-05-22 15:17:24

晚上写一个简单的换皮肤效果的js,结果试了很久没成功,最后发现是js中重写路径的问题。

网页的整体目录是这样的:

学习问题--js图片路径加载问题

由于我在html页面中是链接的外部样式表和js文件,所以在写js的时候考虑图片的路径是根据changeBg.js这个文件的位置来考虑的,忽略了js文件是要在html中加载,所以导致图片一直提示404错误。

学习问题--js图片路径加载问题

changeBg.js中重写图片路径的失败代码(和changeBg.js的上一级js文件夹同级的images文件夹)如下:

学习问题--js图片路径加载问题

解决方法有3个:

1.在根目录projects下面添加一个images文件夹,这样加载html中加载changeBg.js时候就可以实现效果了。

2.因为我是放在</body>前出现的这个问题,如果把外链的js文件放在<head></head>中,是可以实现效果的。

3.把changeBg.js中的图片路径改成和.html文件同级的images文件夹,如下:

学习问题--js图片路径加载问题