TUniImage, округлить ищображение

[Dinkin]

Добрый день. 

В компонент TUniImage, вывожу фото пользователей, возможно ли как то округлить их? как по ссылке на примере...

[Sherzod]

Добрый день,

1. CustomCSS ->

.customImg img {
  border-radius: 50%;
}

2. UniImage1 ->

[Dinkin]

А такой вопрос  по поводу загрузки изображения. Я подгружаю его прям совсем просто

UserImage->Url = L"http://....Profile/photos/" + IntToStr(id_user) + L".jpg";

Но если изображение отсутствует?....просто обычно я это решал через TIdHTTP, но у верен что для Uni есть что то свое?

[Sherzod]

14 minutes ago, Dinkin said:

Но если изображение отсутствует?

атрибут alt = имя компонента

[Dinkin]

Спасибо, а где указать то алтернативную ссылку?

[Sherzod]

7 minutes ago, Sherzod said:

атрибут alt = имя компонента

Это не ссылка, а альтернативный текст.

[Dinkin]

Я извиняюсь, но не понял а где это искать?

[Sherzod]

2 minutes ago, Dinkin said:

Я извиняюсь, но не понял а где это искать?

Что именно? AltName ?

[Dinkin]

2 minutes ago, Sherzod said:

Что именно? AltName ?

Да, я поставил позицию true, но а как теперь мне  связать ссылку на альтернативное изображение?

[Sherzod]

Хорошо,

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

.customImg img {
  border-radius: 50%;
  background-image:url('files/imageNotFound.svg');
}

 

[Dinkin]

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

[Sherzod]

ShowAltName = False не помогает?

[Dinkin]

ShowAltName = true // Вобще так не работает

ShowAltName = false// Работает, но с иконкой битого изображения

[Sherzod]

Какой браузер используете?

[Dinkin]

1 minute ago, Sherzod said:

Какой браузер используете?

chrome (актуальная версия)

[Sherzod]

Just now, Dinkin said:

chrome (актуальная версия)

У меня работает.

[Dinkin]

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

[Sherzod]

Есть еще такое решение, Вы можете сами проанализировать. Я попробую чуть позже...

<img alt="User Image" class="user-image" src="/Resources/images/user-icon.png" onerror="this.onerror=null; this.src='/Resources/images/default_img.png'">

 

[Dinkin]

Извиняюсь, а куда это вставлять? 🙂

[Sherzod]

3 minutes ago, Dinkin said:

Извиняюсь, а куда это вставлять? 🙂

 

5 minutes ago, Sherzod said:

Я попробую чуть позже...

 

[Sherzod]

А если использовать такой код?

     if FileExists() then
     begin

     end
     else begin
       UniImage1.Url := '';
     end;

 

[Dinkin]

1 minute ago, Sherzod said:

А если использовать такой код?

Так  как картинка ссылкой,  не лежит где то в директории, то он не подойдет🙃

 

9 minutes ago, Sherzod said:

Я попробую чуть позже...

Спасибо, буду ждать.

[Sherzod]

17 hours ago, Dinkin said:

Так  как картинка ссылкой,  не лежит где то в директории, то он не подойдет🙃

Добрый день,

Попробуйте это решение для всех "<img>"...

MainForm.Script ->

function insertAtIndex(str, substring, index) {
    return str.slice(0, index) + substring + str.slice(index);
}

Ext.override(Ext.Component, {
    initComponent: function() {
        if (this.html && this.html.indexOf('<img src=') > -1) {
            let _src = this.html.match(/<img src='([^']+)'/)[1];
            if (_src != '') {
                this.html = insertAtIndex(this.html, " onerror=\"this.onerror=null; this.src='files/fileNotFound.svg'\"", 4);
            }
        }  
        this.callParent();
    }
});

 

[Dinkin]

Спасибо, все работает!