Axios get request - img src link response format - / are being converted to spaces

Question

I am trying to generate a dynamic link to a movie poster using an Axios call.

function getMovies(searchText){
axios.get('https://api.themoviedb.org/3/search/movie?api_key='+ API_KEY + "&language=en-US&query=" + searchText + "&page=1&include_adult=false")
.then((response) => {
    let movies = response.data.results;
    let output = '';
    $.each(movies, (index, movie) => {
        console.log("http://image.tmdb.org/t/p/w185/" + movie.poster_path);
        let movieUrl = "http://image.tmdb.org/t/p/w185/" + movie.poster_path;
        output += `
            <div class="col-md-3">
                <div class="well text-center>
                    <img src="${movieUrl}" >
                    <h5>${movie.title}</h5>
                    <a onclick="movieSelected('${movie.imdbID}') target="_blank" class="btn btn-primary" href="#">Movie Details</a>
                </div>
            </div>
        `;
    });
    $('#movies').html(output);
})
.catch((err) => {
    console.log(err);
});

};

The console.log outputs the correct link syntax, for example: http://image.tmdb.org/t/p/w185//8WmT9i9sili2uLNzGGm3nc7AUR3.jpg

but on the DOM the link is formatted with spaces instead of / for example:

<img src=" http:="" image.tmdb.org="" t="" p="" w185="" 8wmt9i9sili2ulnzggm3nc7aur3.jpg"="">

What is going on here? Do I need to use something like paramsSerializer or encodeURI or is it something else?

Answer 1

The class attribute value for the div below wasn't closed with a double quote.

<div class="well text-center>

The browser could only try to make sense of it and it treats every character until the next " in img src=" as a value of the class attribute for the div.

Then, the value of movieUrl is treated as attribute values as well not without it properly escaped.

Closing the missing quotes (<div class="well text-center">) should resolve that issue.