Axios получает запрос - формат ответа ссылки img src - / преобразуется в пробелы - PullRequest
Новая
       5

Axios получает запрос - формат ответа ссылки img src - / преобразуется в пробелы

0 голосов
/ 01 ноября 2018

Я пытаюсь создать динамическую ссылку на постер фильма с помощью вызова Axios. 

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);
});

};

В console.log выводится правильный синтаксис ссылки, например: http://image.tmdb.org/t/p/w185//8WmT9i9sili2uLNzGGm3nc7AUR3.jpg

но в DOM ссылка форматируется с пробелами вместо / например: 

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

Что здесь происходит? Нужно ли использовать что-то вроде paramsSerializer или encodeURI или это что-то еще?

1 Ответ

0 голосов
/ 02 ноября 2018

Значение атрибута class для div ниже не было закрыто двойной кавычкой. 

<div class="well text-center>

Браузер может только попытаться найти смысл, и он обрабатывает каждый символ до следующего " в img src=" как значение атрибута class для div.

Тогда значение movieUrl также рассматривается как значение атрибута , без которого он не может быть корректно экранирован .

Закрытие пропущенных кавычек (<div class="well text-center">) должно решить эту проблему .

...