Question

我的网站具有以下结构：

root            --> such as localhost or example.com or file:///... etc.
|--css
|--image
: |--folder     --> root/image/folder/
|--js
: |--script.js  --> root/js/script.js
|--page
: |--index.html --> root/page/index.html
|--index.html   --> root/index.html

我使用jQuery为root/index.html编写图像并保存到root/js/script.js

var db = {
    "images" : [
        {"image-url": "image/folder/myImage.png"},
        {"image-url": "image/folder/myImage.png"},
        {"image-url": "image/folder/myImage.png"}
    ]
}

$.each(db.images, function (key, data) {
    var image = data['image-url'];
    $('body').append('<image src="' + image + '" />');
}

它正常工作。我的图像正在显示。我将尝试在index.html中创建root/page并在此页面上使用../js/script.js。但它似乎没有显示任何图像。在浏览器显示空白框的图像。我将尝试查看F12并发现image-url返回此值。

GET root/page/image/folder/myImage.png net::ERR_FILE_NOT_FOUND

但我想在root/image/folder/myImage.png引用我的图像。我不知道如何编写参考图像url的脚本来编写图像并在任何使用相同脚本的页面上显示。不能有人来解决这个问题。提前感谢，对不起我的技巧。

Answer 1

如果你有几个静态图像，那么最好使用CSS：

如果您的CSS文件中有background-image定义，那么它将适用于任何相对路径。

CSS（root/css/site.css）：

.some-image {
     background-image: url('../image/your-image.png`);
}

现在，如果您在root/index.htm和root/page/index.htm中加入此内容，则会对两者都有效。

如果您的图片是动态的，并且是由PHP或其他任何内容生成的，则可以使用以下网址：

var db = {
    "images" : [
        {"image-url": "/image/folder/myImage.png"},
        {"image-url": "/image/folder/myImage.png"},
        {"image-url": "/image/folder/myImage.png"}
    ]
};

URL中有一个前导斜杠。即，结果如下：

<img src="/image/folder/myImage.png"/>

它是绝对路径参考。该URL将从域的根目录计算。例如，对于http://localhost，它将为http://localhost/image/folder/myImage.png，并且对于主机中的任何页面都是相同的。

请注意，
- 如果您的站点位于子文件夹中，绝对URL仍将指向根文件夹
- 对于file协议/将指向驱动器的根目录

您可以使用BASE标记来指定基本网址。

在this Stackoverflow topic和this Webmasters Stackexchange topic了解详情。

如何为参考图像url编写javascript来编写图像并在任何使用相同脚本的页面上显示？

1 个答案: