个人中心
gpt4 book ai didi

javascript - 背景图像不会使用 tailwind 和 nextjs 动态变化

转载 作者：行者123 更新时间：2023-12-05 02:30:56 27 4
gpt4 key购买 nike

<分区>

介绍

我正在使用 nextJS 和 TailwindCSS 创建一个天气应用程序。我几乎已经创建了整个应用程序，但最后还是遇到了这个 UI 问题。 web

我想要什么？

我想根据天气描述(例如:晴空、阴霾、雨、雪)动态更改背景图像。

问题

为此，我编写了一个函数 changeBackground("rain") 但它不起作用。我已经在 tailwind.config.js 文件中定义了所有图像路径。调试后，我发现该函数给出了正确的答案(在控制台中打印出答案)但我的 className="bg-${changeBackground("rain")}" 不工作。下面是代码

tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        'day_sun' : "url('../public/back_big.jpg')",
        'day_rain' : "url('../public/dayrain.jpg')",
        'day_cloud' : "url('../public/daycloud2.jpg')",
        'day_snow' : "url('../public/daysnow.jpg')",
        'night_sun' : "url('../public/nightsunny.jpg')",
        'night_snow' : "url('../public/nightsnow.jpg')",
        'night_thunder' : "url('../public/nightthunder.jpg')",
      }
    },
  },
  plugins: [],
}

index.js

import Head from "next/head";
import { useEffect } from "react";
import Image from "next/image";
import { useState } from "react";
import Today_highlight from "./components/Today_highlight";
import Weather_Today from "./components/Weather_Today";
import Weather_week from "./components/Weather_week";
import searchimageurl from "../public/search.gif";
import Typed from "react-typed";


const Home = () => {
  //console.log("res1 = ", results1);
  //const router = useRouter();
  const [city, setCity] = useState("");
  const [data, setData] = useState({ day: {}, week: {} });

  


  //for the first time
  useEffect(() => {
    (async () => {
      const url = `https://api.openweathermap.org/data/2.5/weather?q=Delhi&appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;
      const res1 = await fetch(url);
      const response1 = await res1.json();
      //console.log("res1 = ",response1);

      //api-2
      const url1 = `https://api.openweathermap.org/data/2.5/forecast/daily?q=Delhi&appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;
      const res2 = await fetch(url1);
      const response2 = await res2.json();
      //console.log("res2 = ",response2);

      setData({ day: response1, week: response2 });
    })();
  }, []);


  const handleChange = (e) => {
    setCity(e.target.value);
    //console.log(city)
  };

  const handleSubmit = async (e) => {
    //console.log("%c ClickSubmit","font-size:12px; color:green; padding:10px;")
    //console.log("city = ", city);
    //router.push(`/?term=${city}`);

    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;
    const res = await fetch(url);
    const data1 = await res.json();
    //console.log(data1);

    //api-2
    const url1 = `https://api.openweathermap.org/data/2.5/forecast/daily?q=${city}&appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;
    const res1 = await fetch(url1);
    const data2 = await res1.json();
    //console.log(data2);
    setData({ day: data1, week: data2 });
  };

  //console.log(data);
  const weather = data?.day?.weather;
  
  //console.log("we - ",weather[0]?.description)
  //fn to determine the bg
  function changebackground(des) {
    //console.log("des =",des)

    if (des === "sky is clear" || des === "clear sky") return 'day_sun';
    else if (des === "few clouds") return 'day_cloud';
    else if (des === "scattered clouds") return 'day_cloud';
    else if (des === "broken clouds" || des === "overcast clouds")
      return 'day_cloud';
    else if (
      des === "shower rain" ||
      des === "light rain" ||
      des === "drizzle" ||
      des === "moderate rain"
    )
      return 'day_rain';
    else if (
      des === "rain" ||
      des === "very heavy rain" ||
      des === "heavy intensity rain" ||
      des === "extreme rain" ||
      des === "heavy intensity shower rain"
    )
      return 'day_rain';
    else if (
      des === "thunderstorm" ||
      des === "light thunderstorm" ||
      des === "heavy thunderstorm" ||
      des === "ragged thunderstorm" ||
      des === "thunderstorm with rain"
    )
      return 'night_thunder';
    else if (des === "snow" || des === "light snow" || des === "heavy snow")
      return 'day_snow';
    else if (
      des === "light rain and snow" ||
      des === "rain and snow" ||
      des === "light shower snow"
    )
      return 'night_snow';
    else if (
      des === "mist" ||
      des === "fog" ||
      des === "smoke" ||
      des === "haze"
    )
      return 'day_rain';
    else return 'day_sun';
  }

  console.log(changebackground("snow"),"-> picture")

  return (
    <>
      <Head>
        <title>Weather-Lytics</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div  className={`lg:bg-${changebackground("snow")} bg-no-repeat`} >
        {/* input */}
        <div className="p-3 xl:p-5 flex flex-row justify-center items-center space-x-2 xl:space-x-5 ">
          <div className=" border-2 border-stone-700 rounded-full ">
            <Typed
              strings={[
                "Search for Delhi",
                "Search for Tokyo",
                "Search for California",
                "Search for Ulaanbaatar",
              ]}
              typeSpeed={30}
              backSpeed={50}
              attr="placeholder"
              loop
            >
              <input
                className="w-full rounded-full p-2 xl:p-4 pl-5 xl:pl-10 text-base xl:text-3xl text-blue-800 font-bold active:rounded-full "
                value={city}
                type="text"
                onChange={handleChange}
              />
            </Typed>
          </div>
          <div>
            <button
              className="p-1 m-auto p-auto"
              onClick={() => handleSubmit()}
            >
              <div className="w-14 h-14 xl:w-16 xl:h-16 p-2 rounded-full bg-pink-400 border-2 hover:bg-pink-600 border-white">
                <Image
                  src={searchimageurl}
                  layout="responsive"
                  alt="Search_icon"
                  className=" rounded-full p-3 bg-blue-900 "
                />
              </div>
            </button>
          </div>
        </div>

        <div className="min-h-full  flex flex-col lg:flex-row justify-evenly ">
          <div className="bg-white/50 xl:bg-white/70  w-full h-full lg:w-1/4 lg:h-full xl:m-4 rounded-lg xl:rounded-3xl">
            <Weather_Today results={data.day} />
          </div>
          <div className=" lg:h-full">
            <div className="min-h-full flex flex-col">
              <div className="bg-white/50 xl:bg-white/70 xl:m-4 xl:rounded-3xl">
                <Today_highlight results={data.day} />
              </div>
              <div className="bg-white/50 xl:bg-white/70 xl:m-4 xl:rounded-3xl">
                <Weather_week results1={data.week} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};


export default Home;

请帮我这样做？？？

27 4 0
文章推荐： python - GitLab CI Python 黑色格式化程序说 : would reformat, 而运行黑色不会重新格式化
文章推荐： visual-studio-code - python 解释器在终端窗口中引用 python 的 zen
文章推荐： haskell - 鉴于 STG 生成自定义 ABI，Haskell 链接如何工作
文章推荐： azure - 在 Azure Devops YML 管道脚本中使用 bool 变量作为小写字符串
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com