一、JS中的图片路径
1.1 相对路径与绝对路径
- 相对路径：相对路径相对于引用JS文件的HTML页面。例如，如果JS文件位于
/js/app.js，而图片位于同一目录下，则图片路径可以写为./images/image.jpg。 - 绝对路径：绝对路径是指从网站根目录开始的路径。例如，如果网站根目录是
http://example.com/，图片位于/images目录下，则图片路径可以写为http://example.com/images/image.jpg。
1.2 实战案例
document.addEventListener("DOMContentLoaded", function() {
var img = document.getElementById("myImage");
img.src = "./images/myImage.jpg";
});
二、CSS中的图片路径
2.1 背景图片路径
- 相对路径：在CSS中，相对路径相对于包含该CSS规则的HTML文件。例如，如果CSS文件位于
/css/style.css，图片位于同一目录下，则图片路径可以写为background-image: url(images/background.jpg);。 - 绝对路径：绝对路径与JS中的使用方法相同。
2.2 实战案例
body {
background-image: url("http://example.com/css/admin/images/background.jpg");
}
三、图片路径的最佳实践
3.1 确保路径正确
3.2 使用相对路径
尽可能使用相对路径，以减少因网站结构变化导致的路径错误。