Подскажите пожалуйста:
На проекте подключаются картинки
<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 надо использовать? Или это както влияет на отображение на мобильных устройствах?