javascript - 动态改变相对图像路径

Question

我有一个页面，其中包含来自单独文件夹的 HTML 模式。该 HTML 有一个相对图像路径，我需要更改该路径，以便我可以从包含的 HTML 以及源 HTML 加载图像。

源代码.html

<div>
    <svg class="icon">
        <use xlink:href="../../assets/svg/spritemap.svg#icon-close" />
    </svg>
</div>

index.html，包含相同的代码片段，但路径需要更改为仅 Assets

<div>
    <svg class="icon">
        <use xlink:href="assets/svg/spritemap.svg#icon-close" />
    </svg>
</div>

我正在使用此 JavaScript 来更改 source.html 页面上的路径:

setTimeout(function() {
$('img').each(function(){
var $this = $(this);
$this.attr('src',$this.attr('src').replace('assets','../../assets'));
});
$('use').each(function(){
var $this = $(this);
$this.attr('xlink:href',$this.attr('xlink:href').replace('assets','../../assets'));
})
}, 500);

它搜索 IMG 和 USE 标记上的路径并附加“../../”部分，以便可以找到该文件。存在关联的超时以允许页面加载。

但是，资源无法可靠地加载到 source.html 页面中。有时加载，有时不加载。

动态更改不同页面上的相对图像路径的最佳方法是什么？我应该使用 baseURL 变量还是其他变量？

Answer 1

我不认为你的策略很疯狂。有一个更干净的基于 js 的解决方案，使用从给定页面的单个数据属性中提取的基本 URL，但我怀疑您的问题只是加载顺序。您是否尝试过在准备就绪的文档中运行代码，而不是 setTimeout？

或者更好的是，在窗口加载中运行代码，这将确保 DOM 和所有资源已首先加载:

$( window ).load(function() {

//put all your code in here

});

---编辑---

从上面的评论看来，文件之间的唯一区别是开发环境与生产环境。这仍然指向更强大的 JavaScript 解决方案，但如果文件是静态的，那么为什么不在本地进行处理/决策，然后只上传相关的 html 文件呢？手动或使用 Grunt/Gulp 类型的部署脚本。