Я пытался загрузить динамическое c изображение на свой веб-сайт, но оно работает только в браузере моего компьютера. Если я открою сайт с помощью смартфона, изображение не будет загружаться.
<div class="d-inline-block">
<img class="d-inline"
src="http://openweathermap.org/img/wn/{{
weather.icon }}@2x.png" alt="weather"
/>
<span class="main_description">{{ weather.short_climate_desc }},
</span>
<span class="detailed_description">{{ weather.detail_climate_desc }}
</span>
</div>
До того, как оно было загружено правильно, но после того, как я реализовал эту функцию, я замечаю ошибку.
HOME.COMPONENT .TS
getGeoLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition((geoPosition) => {
this.weatherService.getInitialLocation(geoPosition.coords.latitude, geoPosition.coords.longitude)
.subscribe(data => {
this.changeBG(this.dayOrNight(
this.pegue_data_local(data.timezone),
this.pegue_nascer_e_por_do_sol(data.timezone, data.sys.sunrise),
this.pegue_nascer_e_por_do_sol(data.timezone, data.sys.sunset)))
this.weather = new Weather
(
data.name,
data.sys.country,
new Date(this.pegue_data_local(data.timezone)),
data.weather[0].icon,
data.weather[0].main,
data.weather[0].description,
Math.round(data.main.temp),
this.meterSecondTokmHour(data.wind.speed),
this.getWindDirection(data.wind.deg),
data.main.humidity,
Math.round(data.main.feels_like),
data.main.pressure,
Math.round(data.main.temp_min),
Math.round(data.main.temp_max),
this.meterToKm(data.visibility),
new Date(this.pegue_nascer_e_por_do_sol(data.timezone, data.sys.sunrise)),
new Date(this.pegue_nascer_e_por_do_sol(data.timezone, data.sys.sunset))
)
this.displayInfo = true;
}, (err) => { this.error2 = true; this.error = false; })
}, (error)=> {
console.log(error.message);
})
}
}
WEATHERSERVICE.ts
getInitialLocation(lat: number, lon: number): Observable<any> {
console.log(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${this.apiKey}`);
return this.http.get(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}${this.unit}&appid=${this.apiKey}`);
}
Я вызываю эту функцию на моем ngOnInit (). Когда сайт загружается, он получает местоположение пользователя, выполняет поиск и возвращает информацию о погоде для этого указанного c местоположения и создает объект.
Obs: отображаются все другие данные, НО изображение. Obs: Эта проблема возникает только на мобильных устройствах, изображение корректно загружается в обычных веб-браузерах.
Большое спасибо!