временное замещение изображения водяного знака при отсутствии изображения [дубликат]

Используя Python 2, вызывая .lower() для каждой строки или Unicode-объекта ...

string1.lower() == string2.lower()

... будет работать большую часть времени, но на самом деле не работает в ситуации @tchrist описал .

Предположим, что у нас есть файл с именем unicode.txt, содержащий две строки Σίσυφος и ΣΊΣΥΦΟΣ. С Python 2:

>>> utf8_bytes = open("unicode.txt", 'r').read()
>>> print repr(utf8_bytes)
'\xce\xa3\xce\xaf\xcf\x83\xcf\x85\xcf\x86\xce\xbf\xcf\x82\n\xce\xa3\xce\x8a\xce\xa3\xce\xa5\xce\xa6\xce\x9f\xce\xa3\n'
>>> u = utf8_bytes.decode('utf8')
>>> print u
Σίσυφος
ΣΊΣΥΦΟΣ

>>> first, second = u.splitlines()
>>> print first.lower()
σίσυφος
>>> print second.lower()
σίσυφοσ
>>> first.lower() == second.lower()
False
>>> first.upper() == second.upper()
True

Символ Σ имеет две формы в нижнем регистре, ς и σ, а .lower() не поможет сравнивать их без учета регистра.

Однако, поскольку из Python 3 все три формы будут разрешены для ς, и вызов lower () для обеих строк будет работать правильно:

>>> s = open('unicode.txt', encoding='utf8').read()
>>> print(s)
Σίσυφος
ΣΊΣΥΦΟΣ

>>> first, second = s.splitlines()
>>> print(first.lower())
σίσυφος
>>> print(second.lower())
σίσυφος
>>> first.lower() == second.lower()
True
>>> first.upper() == second.upper()
True

Итак, если вы заботитесь о краевых случаях, таких как три сигмы на греческом языке, используйте Python 3.

(Для справки, Python 2.7.3 и Python 3.3.0b1 показаны в распечатках интерпретатора выше.)

20
задан Richard 7 February 2013 в 12:23
поделиться

6 ответов

Вместо прямого ссылки на изображение, вставьте его в DIV, как показано ниже:

<div class="placeholder">
    <div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div>
</div>

Затем в вашем CSS:

.placeholder {
    width: 300;
    height: 300;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('my_placeholder.png');
}
14
ответ дан Anderson Pimentel 28 August 2018 в 10:32
поделиться

Единственное, что я могу придумать, чтобы свести к минимуму эффект перехода на ваш текст, - это установить min-height, где будет отображаться изображение, я бы сказал, - установите его на «более короткое» изображение, о котором вы знаете. Таким образом, скачок будет менее очевидным, и вам не нужно будет использовать lazyLoad или так ... Однако это не полностью устраняет вашу проблему.

1
ответ дан Luca 28 August 2018 в 10:32
поделиться

Есть действительно простая вещь, чтобы проверить, прежде чем вы начнете смотреть на ленивую загрузку и другие JS. Убедитесь, что загруженные изображения JPG сохранены с включенной опцией «progressive»! Это приведет к тому, что они будут загружать изображение итеративно, начиная с замещающего, который будет с низким разрешением и быстрее загружаться, а не ждать самых высоких данных res перед рендерингом.

3
ответ дан Neil Myatt 28 August 2018 в 10:32
поделиться

Имейте в виду - ответы выше, которые рекомендуют использовать фоновый подход div, изменят семантику вашего изображения, превратив его из img в div. Это приведет к таким вещам, как отсутствие индексации этих изображений поисковым искателем, задержка загрузки этих изображений браузером (если вы явно не загружаете их) и т. Д.

Решение этой проблемы (хотя не используется div фоновый подход) состоит в том, чтобы иметь обертку div для вашего изображения и добавлять к ней верхнюю часть на основе соотношения сторон изображения, которое вам нужно знать заранее. Ниже код будет работать для изображения с соотношением сторон 2: 1 (высота составляет 50% от ширины)

<div style="width:100%;height:0; padding-top:50%;position:relative;">
  <img  src="<imgUrl>" style="position:absolute; top:0; left:0; width:100%;">
</div>

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

1
ответ дан Punit S 28 August 2018 в 10:32
поделиться

Вот один наивный способ сделать это,

img {box-shadow: 0 0 10px 0 rgba (# 000, 0.1); }

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

Надеюсь, что это поможет

0
ответ дан Shreyas Gaonkar 28 August 2018 в 10:32
поделиться

Это очень просто .. Этот сценарий позволяет загружать фотографию профиля, которая по умолчанию создает образ места. Вы можете загрузить фоновое изображение multi css в элемент. Когда аватар фото сбой, изображение-заполнитель появляется по умолчанию для div.

Если вы используете элемент div, который загружается через css-фоновое изображение, вы можете использовать этот стиль:

#avatarImage {
    background-image: url("place-holder-image.png"), url("avatar-image.png");
}
<div id="avatarImage"></div>

0
ответ дан Sinan Ergin 28 August 2018 в 10:32
поделиться
Другие вопросы по тегам:

Похожие вопросы: