無法使用JavaScript替換/使用relatvie圖片網址。絕對路徑的作品，相對不

我加了我認爲是小提琴的重要部分。基本上，我所有的文件都在一個目錄中。 CSS使用相對路徑在div #slides上放置背景圖像。然後，使用javascript和一個數組，我想改變背景圖片。然而，只有當我放入圖像的絕對路徑時，js纔有效。無法使用JavaScript替換/使用relatvie圖片網址。絕對路徑的作品，相對不

小提琴不會顯示圖像，但結構在那裏。通常情況下，我有一個函數可以增加i並顯示相應的圖片，但我認爲這對於故障排除是不必要的。

我試圖使用相對路徑的原因是因爲我可能需要能夠複製和粘貼整個文件夾或使用它從沒有互聯網訪問的PC上的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; 
}

//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] + '")'; 
};

來源

2015-07-02 user5074526

你有沒有試過檢查編輯樣式與不同的相對路徑，看看你是否可以手動做到這一點？至少可以排除一個路徑/ CSS問題。 – inorganik

這完全取決於你在哪裏，當你請求的文件。也沒有辦法看到你從plunkr描述的內容，因爲這將與plunker網址相關。

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

應該從域上的任何位置開始工作。我通常避免在網址中使用../。

來源

2015-07-02 15:55:54

是的，我知道它不會出現在小提琴中，但我認爲這將是一個更簡單的方法來查看我願意幫助的人的所有代碼。使用/ directory/first的問題是該目錄可能會更改 - 可能是桌面或C：/或其他任何內容，具體取決於我放置的位置。然而，我確實知道如果我把CSS和js放在html文件中，它可以像所期望的那樣工作，這很不錯，但有點奇怪。關於路徑的東西我顯然不理解。 – user5074526

如果路徑將是動態的，那麼你的圖像數組不應該是靜態的。但是，您提取的圖像數組也應返回從域根目錄的圖像路徑。 –

無法使用JavaScript替換/使用relatvie圖片網址。絕對路徑的作品，相對不

回答

相關問題