Как отобразить резервный URL-адрес, если данные JSON не определены?
const SearchResults = ({ artists }) => (
<div className = "search-results">
{artists.map(val => (
<a href = "# " key = {uniqid()}>
<h3>{val.name}</h3>
<img
className = "box-img"
src = {
val.images[0].url
? val.images[0].url
: 'https://www.w3schools.com/w3css/w3css_images.asp'
}
alt = ""
/>
</a>
))}
</div>
);
У меня есть вызов API в Spotify для получения списка исполнителей. Когда все результаты имеют изображение, проблем нет, но если их нет, React просто возвращает undefined, и я не могу понять, как отобразить изображение заполнителя.
@ Li357 - не уверен насчет asp.net, но я обслуживаю файлы GIF / JPG / PNG в PHP, просто отправляя соответствующий заголовок содержимого и содержимое файла. URL заканчивается на .php ...
@ivanivan Но здесь это ссылка w3schools на страницу ASP.NET без отдельных заголовков. Ничто другое в предоставленном коде не указывает на ошибку, описанную OP.
Ответы 1
Вы можете просто иметь голое изображение png по умолчанию для этого в своем проекте, а затем импортировать его и использовать, когда изображение не возвращается из spotify, что-то вроде:
import defaultArtistImage from './myProject/assets/images/defaultArtistImage.png';
...
const SearchResults = ({ artists }) => (
<div className = "search-results">
{artists.map(val => (
<a href = "# " key = {uniqid()}>
<h3>{val.name}</h3>
<img
className = "box-img"
src = {
val.images.length !== 0
? val.images[0].url
: defaultArtistImage
}
alt = ""
/>
</a>
))}
</div>
);
это проще, чем получение изображения с внешнего сервера. Кроме того, выполнение val.images[0].url может выдать ошибку, если .images - это пустой массив.
Большое вам спасибо, я не знаю, почему я не подумал об этом.
Это потому, что это недопустимый источник изображения. Страница ASP.NET - это не изображение ...