Question

因此，我正在尝试做的背景。用户输入城市，背景更改为该城市的图像，该图像是通过对PID API的API调用获得的。我将结果保留为变量“ background”，但我不知道如何将其附加到页面的背景。 “ const background”变量本身会呈现图像URL。这意味着当我console.log（background）时，我获得了要应用于整个页面的背景图像的URL。

import React, { Component } from "react";
import Title from "./Title.js";
import Form from "./Form.js";
import Weather from "./Weather.js";
import axios from "axios";

// import logo from "./logo.svg";
import "./App.css";

const API_KEY = "b6907d289e10d714a6e88b30761fae22";
// const API_ID = "12653279-f2ae53f8bfb342d39b6cbf92b";

class App extends Component {
  // the initial state of the application is set below, will change upon submit of button
  state = {
    temperature: undefined,
    city: undefined,
    description: undefined,
    error: undefined,
    searchText: "",
    apiUrl: "https://pixabay.com/api",
    apiKey: "12653279-f2ae53f8bfb342d39b6cbf92b",
    images: []
  };
  getweatherData = async e => {
    // arrow function used as an alternative to constructor to bind data and use "this" to still be bound to component
    // async returns a promsise to be settled
    e.preventDefault();
    // e argument passed in the async function is now used to prevent refresh default action
    const city = e.target.elements.city.value;
    // a way that we can make the city value dynamic within the api url in the api call
    const api_call = await fetch(
      // await key word pauses the function until data is recieved from api call
      `https://openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}`
    );
    const data = await api_call.json();
    // above, the data recieved from the API is converted to json readable format
    console.log(data);
    if (data.cod === 404) {
      throw Error(data.message);
    } else {
      this.setState({
        temperature: data.main.temp.toFixed(0),
        city: data.sys.city,
        country: data.sys.country,
        description: data.weather[0].description,
        error: "undefined"
      });
    }
    axios
      .get(
        `${this.state.apiUrl}/?key=${
          this.state.apiKey
        }&q=${city}&image_type=photo&per_page="1"
        }&safesearch=true&editorschoice= true`
      )
      .then(res => {
        this.setState({ images: res.data.hits });
        const background = res.data.hits[1];
        console.log(background);
      });
  };

  render() {
    return (
      <div className="container">
        <Title />
        {/* setting up a prop to the getweatherData value so we can have access to it in the form.js */}
        <Form getweatherData={this.getweatherData} />
        {/* defining props so they can be accessed in the weather.js */}
        <Weather
          temperature={this.state.temperature}
          city={this.state.city}
          country={this.state.country}
          description={this.state.description}
          error={this.state.error}
        />
      </div>
    );
  }
}

export default App;

表格。 js

import React, { Component } from "react";

class Form extends Component {
  render() {
    return (
      // a react attribute onSubmit to call in our prop
      <form onSubmit={this.props.getweatherData}>
        <input type="text" name="city" placeholder="City..." />
        {/* <input type="text" name="country" placeholder="Country..." /> */}
        <button>Get Weather</button>
      </form>
    );
  }
}

export default Form;

Answer 1

将背景图像设置为状态，然后对要显示它的任何元素使用内联样式。

...
const background = res.data.hits[1];
this.setState({ background })
...
return (
    <div className="container" style={{ this.state.background ? { background: this.state.background } : {} }}>
...

如何将API调用中的图像结果作为背景图像附加到我的应用中？

1 个答案: