Question

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

source.html

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

index.html，包括相同的代码段，但路径需要更改为仅资产

<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的解决方案，使用从给定页面的单个数据attr拉出的基本URL，但我怀疑你的问题只是加载序列。您是否尝试在文档准备中运行代码，而不是setTimeout？

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

$( window ).load(function() {

//put all your code in here

});

--- --- EDIT

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

动态更改相对图像路径

1 个答案: