Проверьте правильность изображения src при настройке - PullRequest
Новая
       34

Проверьте правильность изображения src при настройке

0 голосов
/ 19 октября 2018

У меня есть небольшой фрагмент кода, при нажатии на изображение пользователь может изменить источник.Это функция, которую я использую 

function doStuff(objId){
        newVal = prompt("new Value")
        if(newVal==""){
            newVal = "blank"
        }
    document.getElementById(objId).src=newVal+".png"
}

Есть ли способ проверить перед установкой src, является ли это допустимым именем файла в той же точке, что и при проверке, не указал ли пользователь ничего?Я хотел бы иметь возможность защитить страницу, поэтому, если пользователь вводит «банан» и нет доступного файла banana.png, я просто изменяю его на файл blank.png.

Я нашел различныеспособы сделать это по ошибке, но я не был уверен, как это сделать в этом случае, поскольку ни один из них не запускается при динамическом обновлении страницы.

Спасибо!

1 Ответ

0 голосов
/ 19 октября 2018

измените тег img для отображения изображения по умолчанию при ошибке

<img onerror="this.src='images/default.jpg'"/>

Теперь вы можете выполнить функцию динамического изменения изображения 

function doStuff(objId){
        newVal = prompt("new Value")
        if(newVal==""){
            newVal = "blank"
        }
    document.getElementById(objId).src=newVal+".png"
}

прикрепил фрагмент ниже, который динамически изменяет изображения, если не найден, загрузите изображение по умолчанию 

var server = 'https://homepages.cae.wisc.edu/~ece533/images/';

function changeImage(option) {
  
  document.getElementById('test').src = server + option.value;
}
<html>

<body>

  <img width='150' height='150' id='test' src="http://www.yostra.com/images/team/you.png" onerror="this.src='http://www.yostra.com/images/team/you.png'" />
  <br>
  <select onchange='changeImage(this)'>
  <option>--Choose--</option>
    <option value='airplane.png'>airplane.png</option>
    <option value='baboon.png'>baboon.png</option>
    <option value='abs'>ABC</option>
    <option value='arctichare.png'>arctichare.png</option>
    <option value=''>----</option>
  </select>

</body>

</html>
...