Удалить границу с изображения

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я добавил границу для изображений. Но некоторые изображения отсутствуют, и для этих изображений я добавил сообщение об ошибке. Я не хочу никакой границы для изображений, которые отсутствуют, но я все еще получаю ее. Есть ли какой-либо способ в jquery, которым я могу удалить границу с изображений, которые на самом деле не присутствуют на указанном пути. Спасибо, Роми.

Редактировать

У меня есть большая часть путей к изображениям, в которых некоторые пути к изображениям недопустимы, и для этих недопустимых путей я не хочу добавлять ошибку. У меня есть единый css для всего пути к изображению.Я не могу провести различие между ними. Есть ли какой-либо другой способ сделать это.

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

2. Почему вы хотите отображать поврежденные изображения?

3. Я просто хочу показать сообщение об ошибке для поврежденных изображений, но когда я это делаю, оно также добавляет границу.

4. @Scott — Недавно я имел дело с клиентом, который настаивал на загрузке 4 МИЛЛИОНОВ изображений через свою CMS (хотя я сказал ему, что изменение размера изображения не удалось > 2 МИЛЛИОНОВ. Чтобы бороться с этим, я добавил изображения по умолчанию, regex (для некоторых нелепых символов, которые он также использовал)…. Мне пришлось защищать сайт от клиента гораздо чаще, чем можно было бы подумать необходимым.

Ответ №1:

я буду использовать код david для обработки отсутствующих изображений

http://davidwalsh.name/custom-missing-image-jquery

используйте идею для установки границы — 0

 $("img").error(function () {
      $(this).css("border", "none");
});

Ответ №2:

для изображений, к которым вы не хотите добавлять границы, просто дайте им имя класса, а затем настройте css

 <img src='image.png' class='no-border' />

css:

 img.no-border {
   border:none;
}

Ответ №3:

Что-то вроде

 <img src="broken" onerror="this.style.border='none';"/>

Ответ №4:

Подход CSS, как и говорили другие, но использующий наследование разметки, а не таргетинг на изображения (как таковые).

 .container { }
.container img, .container a img { border:1px solid black }

Итак, ЕСЛИ в этой области вашего макета присутствуют изображения, они получают границу — в противном случае они этого не делают.

Этот подход также сводит на нет необходимость в уникальных идентификаторах для каждого изображения и отдельных классах (хотя классы могут помочь, в зависимости).

Ответ №5:

Вы можете использовать стандартный javascript для изменения класса элемента:

 document.getElementById('IdOfElement').className = 'missing';

Затем настройте некоторый CSS, чтобы у любого элемента с отсутствующим классом не было границы:

 .missing {
    border: none;
}

Каждому изображению потребуется уникальный идентификатор:

 <img src="" id="image1">

1. Но зачем вам использовать стандартный JS, если у вас уже есть jQuery на странице? Обычно я полностью за простой JS, но не в том случае, если я уже добавил jQuery на страницу

2. Да, я хочу решение в Jquery. Если у вас есть, пожалуйста, предложите.