Skip to content
Advertisement

img tag removing slashes from the src

the problem I’m facing is that I get a image URL from an input tag then storing it in a let then I create a li tag with an image tag in it. I put imageURL variable in the src but the image tag removes the slashes from the variable

function addMovie(title, imageURL, rating){
    const li = document.createElement("li")
    const ul = document.getElementById("movie-list")
    li.className = "movie-element"
    li.innerHTML = `
    <div class="movie-element__image>
        <img src="${imageURL}" alt="${title}" id="img" height="100" width = "100">
    </div>
    <div class="movie-elements__info">
        <h2>
            ${title}
        </h2>
        <p>
            ${rating}/5 rating
        </p>
    </div>
    `
    ul.append(li);
}

Advertisement

Answer

Note that has special meaning. So you need to use \ instead of like this:

addMovie("test", "images\test\test.jpg" , 12)

        function addMovie(title, imageURL, rating) {
            const li = document.createElement("li")
            const ul = document.getElementById("movie-list")
            li.className = "movie-element"
            li.innerHTML = `
    <div class="movie-element__image">
        <img src="${imageURL}" alt="${title}" id="img" height="100" width = "100">
    </div>
    <div class="movie-elements__info">
        <h2>
            ${title}
        </h2>
        <p>
            ${rating}/5 rating
        </p>
    </div>
    `
            ul.append(li);
        }

addMovie("test", "images\test\test.jpg" , 12)
<ul id="movie-list"></ul>

Also you forgot " after movie-element__image class

User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement