0

Такая проблема. Я ввожу 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>

1 ответ 1

0

Сначала загрузим картинку и только потом выведем её:

const button = document.querySelector('.btn');
const preview = document.querySelector('.preview');

const addByUrl = () => {
    let valueImg = document.querySelector(".searchBox").value;
    let container = document.createElement("div");
    container.classList.add("preview-image");
    let img = document.createElement("img");
    img.src = valueImg;
    img.onload = function() {
        container.appendChild(this);
        preview.prepend(container);
    }
};

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.