如何在 CSS 背景中显示上传的图像

Question

The initial project had an array with file names stored in there and the image slider would display them.

I am trying to create the upload functionality where the user can upload an image and that image would then be pushed to the array.

I've tried utilizing the URL.createObjectURL method on the uploaded file and pushing it to the display but there's an error when the slide arrives at the array index.

The file comes out as 'blob:http etc...' and so i've tried removing 'blob' from the string and still receiving an error.

HTML:

<div id="container">
    <button class="button" id="leftButton"><i class="fa fa-arrow-left"></i></button>
    <button class="button" id="rightButton"><i class="fa fa-arrow-right"></i></button>
</div>

<div class="upload">
    <p><input type='file' name='image' id="input"></p>

</div>

CSS:

#container {
    margin: 100px auto;
    height: 500px;
    width: 900px;
    border: 7px solid #3e92cc;
    border-radius: 10px;
    background: url('images/one.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Javascript:

let container = document.getElementById("container");
let rightButton = document.getElementById("rightButton");
let leftButton = document.getElementById("leftButton");
let images = ["one.jpg", "two.jpg", "three.jpg", "four.jpg", "five.jpg"];

let imagesIndex = 0;

const inputElement = document.getElementById("input");

let newURL;

//Add background to slider
function addBackground() {

    if (!images[imagesIndex].includes('http')) {
        container.style.background = `url('images/${images[imagesIndex]}')`;
    } else {
        container.style.background = `url('${images[imageIndex]}')`;
    }
    container.style.backgroundPosition = "center";
    container.style.backgroundRepeat = "no-repeat";
    container.style.backgroundSize = "cover";
}

// upload files 
function handleFiles() {
    const fileList = this.files; /* now you can work with the file list */
    const objectURL = window.URL.createObjectURL(fileList[0]);

    //remove 'blob:';
    newURL = objectURL.replace('blob:', '');
    console.log(newURL);
    images.push(newURL);
}

// Event listeners
inputElement.addEventListener("change", handleFiles, false);

rightButton.addEventListener("click", function () {
    imagesIndex++;

    if (imagesIndex >= images.length) {
        imagesIndex = 0;
    }
    console.log(imagesIndex);
    addBackground();
})

leftButton.addEventListener("click", function () {
    imagesIndex--;

    if (imagesIndex < 0) {
        imagesIndex = images.length - 1;
    }
    console.log(imagesIndex);
    addBackground();
})

Answer 1

Don't remove blob: it's required in the URL scheme

// upload files 
function handleFiles() {
    const fileList = this.files; /* now you can work with the file list */
    const objectURL = window.URL.createObjectURL(fileList[0]);

    //remove 'blob:';
    //newURL = objectURL.replace('blob:', '');
    console.log(objectURL);
    images.push(objectURL);
}

Corrected typo in imagesIndex

//Add background to slider
function addBackground() {

    if (!images[imagesIndex].includes('http')) {
        container.style.background = `url('images/${images[imagesIndex]}')`;
    } else {
        container.style.background = `url('${images[imagesIndex]}')`;
    }

    //.. other code
}