动态图片在移动端无法加载 - Angular

Question

我一直试图在我的网站上加载动态图像，但它只在我的电脑浏览器上工作.如果我使用智能手机打开网站，图像将无法加载。

<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()上调用这个函数，当网站加载时，它获取用户位置，搜索并返回该特定位置的天气信息并创建一个对象。

观察：所有其他信息都显示出来了，但是image.Obs.没有显示。这个问题只发生在移动设备上，图片在普通的网页浏览器上加载正常。

非常感谢您

Answer 1

会不会是css和隐藏的xs的问题？如果你把浏览器调整到手机宽度，它还能看到吗？

Answer 2

你可以试试这个，看看有什么显示。我认为图标是空白的，这将解释为什么出现alt文本，因为它无法找到图像的路径。

<div class="d-inline-block">
   <img *ngIf="weather && weather.icon" class="d-inline" 
    src="http://openweathermap.org/img/wn/{{ 
    weather.icon }}@2x.png" alt="weather"
/>
<span>weather.icon = {{weather.icon}}</span>
<span class="main_description">{{ weather.short_climate_desc }}, 
</span>
<span class="detailed_description">{{ weather.detail_climate_desc }}
</span>

console.log(this.weather)在你的桌面上看到这个值，你可以在手机上显示这个值来获取所有的字段。

<span>{{this.weather | json}}</span>

Answer 3

我找到了问题所在.我只需要在图片链接的最后加上 "s".而不是http，我用了https。

我希望这能帮助别人。

<div class="d-inline-block">
   <img *ngIf="weather && weather.icon" class="d-inline" 
    src="https://openweathermap.org/img/wn/{{ 
    weather.icon }}@2x.png" alt="weather"
/>