Question

我添加了我认为是小提琴的重要部分。基本上，我的所有文件目前都在一个目录中。 CSS使用相对路径在div #slides上放置背景图像。然后，使用javascript和数组，我想更改背景图像。但是，如果我输入图像的绝对路径

，则js才有效

小提琴不会显示图像，但结构就在那里。通常情况下，我有一个增加i并显示相应图片的功能，但我认为这不是故障排除所必需的。

我尝试使用相对路径的原因是因为我可能需要能够复制并粘贴整个文件夹，或者在无法访问互联网的电脑上使用USB驱动器。

在开发控制台中，当我设置i = 1并运行该功能时，背景为空白。当我设置绝对路径并执行相同操作时，它会根据i值显示正确的图片。

感谢您的帮助！

编辑：当我将所有代码组合到html文档中时，一切都与相对路径一起工作。因此，在使用不同的html / css / js文件写出路径时，必须有一些简单的东西。

http://jsfiddle.net/xvs8ogjg/4/

HTML

<div id="slides"></div>

CSS

/* I'm using % based sizes on the actual version, but everything else is the same. */

#slides {
    width: 200px;
    height: 200px;
    margin: 0;

    /* this css loads the first image properly when the page loads */
    background-image: url("test1.svg");

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

JS

//Array with images.  Images, css, and js are all in the same folder called slideshow for now.

var slides = document.getElementById('slides');

//Does not work
var images = new Array (
    "test1.svg",
    "test2.svg"
);

//Does not work, i thought i could trick it or something, idk
var images = new Array (
    "../slideshow/test1.svg",
    "../slideshow/test2.svg"
);

//Works
var images = new Array (
    "http://example.com/directory/slideshow/test1.svg",
    "http://example.com/directory/slideshow/test2.svg"
);

//Also works, locally
var images = new Array (
    "file:///C:/Users/myname/directory/slideshow/test1.svg",
    "file:///C:/Users/myname/directory/slideshow/test2.svg"
);

var i = 0;

var change = function() {
slides.style.backgroundImage = 'url("' + images[i] + '")';
};

Answer 1

完全取决于您从中请求文件时的位置。也没有办法看到你从plunkr中描述的内容，因为那将是相对于plunker url。

//Does not work, i thought i could trick it or something, idk
var images = new Array (
    "/directory/slideshow/test1.svg",
    "/directory/slideshow/test2.svg"
);

应该在域上的任何位置工作。我通常避免在网址中使用../。

无法使用JavaScript替换/使用relatvie图像网址。绝对路径有效，相对不起

1 个答案: