动态更改相对图像路径

Question

I have a page that is including an HTML pattern from a separate folder. That HTML has a relative image path that I need to change so that I can load the image from the included HTML, as well as from the source HTML.

source.html

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

index.html, including the same snippet, but the path needs to change to just assets

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

I'm using this javascript to change the path on the source.html page:

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);

Which searches for paths on IMG and USE tags and appends the "../../" portion so the file can be found. There's a timeout associated to allow for the page to load.

However, the assets are not loading in the source.html page reliably. Sometimes they load, sometimes not.

What is the best way to dynamically change a relative image path on separate pages? Should I be using a baseURL variable or something?

Answer 1

I don't think your strategy is crazy. There is a cleaner js based solution using a base URL pulled from a single data attr of the given page, but I suspect your issue is just loading sequence. Have you tried running your code inside of document ready, instead of a setTimeout?

Or better yet, running your code in window load, which will ensure that the DOM and all assets have been loaded first:

$( window ).load(function() {

//put all your code in here

});

---EDIT---

It looks like from your comments above that the only distinction between files is a dev versus production environment. That still would point to a more robust javascript solution, but if the files are static, then why not do the processing/decision making locally and then only upload the relevant html file? Either by hand, or using a Grunt/Gulp type of deployment scripts.