时间戳

首页 > 解决方案 > Axios get request - img src link response format - / are being converted to spaces

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

问题描述

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?

标签： javascriptjqueryurlgetaxios

解决方案

下面的class属性值div没有用双引号括起来。

<div class="well text-center>

浏览器只能尝试理解它，并将直到下一个字符的每个字符"都img src="视为.classdiv

然后， 的值movieUrl也被视为属性值，而不是没有正确转义。

关闭缺少的引号 ( <div class="well text-center">) 应该可以解决该问题。

推荐阅读