Такая проблема. Я ввожу url картинки в поле ввода и вывожу картинку на страницу (при клике на кнопку добавить). Как мне сделать, что если при вводе url не картинка или я вообще ввожу не url, что бы я ничего не выводил. Нужно выводить на страницу только картинки, а то при воде любого текста он выводится и занимает место. Как дать знать что нужны только картинки(img, png, jpg, jpeg)?
const button = document.querySelector('.btn');
const preview = document.querySelector('.preview');
const addByUrl = () => {
let valueImg = document.querySelector(".searchBox").value;
preview.insertAdjacentHTML('afterbegin', `
<div class="preview-image">
<img src="${valueImg}" alt="" />
</div>
`)
};
button.addEventListener("click", addByUrl)
.searchBox {
width: 40%;
outline: none;
}
.preview {
display: flex;
flex-wrap: wrap;
}
.preview-image {
height: 20vh;
margin: 5px;
}
.preview-image img {
height: 100%;
}
<input type="text" class="searchBox" value="" />
<input type="button" class="btn" value="Добавить" />
<div class="preview">
</div>