Cross Origin background-image для отображения картинок из CSS файла

Подскажите пожалуйста:
На проекте подключаются картинки
<Img [src] = "somePic"> в файле html
В файле ts этого компонента прописывается path для картинки к этой переменной
readonly somePic = '/assets/img/picture.jpg';
Как таким способом подключить картинку в css файл, который подтягивается переменной по событию (например, (click) = "clickImg ()")
Потому что если прописывать относительный урл к папке с картинками то они не отображаются и сыпятся в консоль ерроры “has been blocked by CORS policy”
(Если локально разворачивать проект - то все было хорошо)

Css и js хостятся не на том домене на котором запускаются? Как они хостятся? Хочу понять сколько у тебя контроля над тем с какими заголовками можно отдавать картинки с сервера

сейчас на githubpages фронтенд, бекенд на appspot.com

Самое простое - захости картинки на appspot.

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

а если домен/хостинг будет меняться?

только через этого человека.

Есть второй путь который мы можем с тобой исследовать. Это понять какой именно код триггерит ошибку и понять нужен ли этот код (можно ли его заменить). Ты понимаешь какие строки приводят к CORS ошибке? Можешь показать?

Третий путь нам не доступен (настроить сервер так чтобы он отдавал изображения с CORS заголовком для того домена где изображения используются) потому что у нас нет контроля над этой функциональностью на github pages.

или в таком случае - переписать функцию, чтобы не картинка с бекграундом менялась, а картинку сделать статичным <img> и скриптом менять путь к картинке? (цель скрипта - менять изображение при клике по кнопке)

Изменение путей сработает. CORS ошибка может появяться при попытке загрузить изображение AJAX-ом, или при подгрузке в canvas.

изображения jpeg, png. Про AJAX - не знаю, проект на Ангулар 8.

Тип изображений не имеет значения. Фреймверк тоже. Нужно понять какой именно код триггерит проблему и понять можно ли решит ту же задачу другим кодом.

Попробуй свою идею с заменой путей. Теоретически должно сработать.

1 симпатия

В html-разметке - это здесь

<input id="password" #passwordControl="ngModel" [ngClass]="passwordControl.errors&&passwordControl.touched? 'red':'grey'" type="password" class=" password" name="form-control password" [(ngModel)]="userOwnSignUp.password" #passwordControl="ngModel" required minlength="8" appInputcolor [typeColor] = "'#13AA57'" [defaultColor] = "'#000'"> <img class="img" id="img" alt="" (click)="clickImg()">

в Инпуте функция клика
А в ts файле

      clickImg() {
        const showEye = 'url(\'/assets/img/icon/eye.png\')';
        const hideEye = 'url(\'/assets/img/icon/eye-show.png\')';
        const passwordField = document.getElementById('password');
        const imgEye = document.getElementById('img');

и в css файле прописан путь к картинке
background-image: url('/assets/img/icon/eye.png');
Не самое хорошее решение, может есть лучшие варианты, но это побыстрому что получилось сделать

Я не вижу как используется showEye и hideEye. А это и должны быть критичные строчки чтобы понять причину CORS ошибки.

Еще я не понял: тебе удалось решить проблему?

да, удалось, спасибо.
Почемуто этот путь background-image: url(’/assets/img/icon/eye.png’); когда на локальном сервере - то передавал картинку в DOM, но потом когда код перенесли то пути к картинкам не работали, а нужно было убрать слеш вначале картинки background-image: url(‘assets/img/icon/eye.png’); - не знаю почему так…
Или же второй вариант - как ты говорил - переписывать метод так чтобы менялся путь к картинке при клике по кнопке а сами картинки делать не бекграундом чтоб тянулись из CSS файла а img в разметке…

то есть - использовать getElementByID - это не секьюрно и такое лучше не использовать в коде? Это както связано с XSS? Или так нельзя в ts-файлах, потому что там только typescript надо использовать? Или это както влияет на отображение на мобильных устройствах?