小编Mag*_*ect的帖子

问题是我的public文件夹中有 10 张图像，我想在组件中使用它们。而不是写作

import imgurl1 from "../../public/celsius.gif";
import imgurl2 from "../../public/compass.gif";
import imgurl3 from "../../public/rain.gif";
.
.
.
import imgurl8 from "../../public/thermo.gif";
import imgurl9 from "../../public/sunset.gif";
import imgurl10 from "../../public/wind.gif";

上面的代码，我想使用一些更整洁和干净的代码？有没有办法不重复同一行并将其全部导入？

我假设类似的事情

import { imgurl1,imgurl2,...imgurl10, } from "../../public";

介绍

我正在开发一个登录应用程序，在前端使用 Nextjs，在后端使用 springboot。

问题

我能够从调用 /authenticate在 springboot 中开发的名为 loginAPI 的前端登录，并且它成功返回 。authToken登录后，我重定向到主页 ( /allcoupons) 页面。

response.data在登录中，我像这样传递令牌的值

 const handleSubmit = async (e) => {
    // e.preventDefault();

    let requestbody = {
      username: credentials.username,
      password: credentials.password,
    };

    try {
      const response = await axios({
        method: "post",
        headers: {},
        url: "http://localhost:8081/authenticate",
        data: requestbody,
      });

      //console.log("credentials for login = ", credentials);
      //console.log("response from api = ", response);
      if (response.status === 200) {
        router.push(
          {
            pathname: "/allcoupons",
            query: { auth: JSON.stringify(response.data) …

我刚刚使用创建了一个 STRAPI 项目，在此处查找文档

npx create-strapi-app@latest my-shop1

然后注册到管理门户。报名后，我达到了dashboard>>content-Type Builder。然后，一旦我单击create new collection type，创建集合模式就不会显示。即使点击很多次也没有帮助我。另外，我检查了我的模式是否是开发，但它是development 正确的。

另外，我无法编辑默认User集合。单击上面的用户后，我在 URL 中得到了这个

http://localhost:1337/admin/plugins/content-type-builder/content-types/plugin::users-permissions.user

我想知道为什么我无法创建任何集合？请帮忙

我正在使用 Bootstrap 5 中的导航栏。我遇到了 UI 问题。

我有什么？

这是我目前拥有的导航栏。

我想要什么？

我想将导航栏按钮（登录和注册）对齐到右端。

import React from "react";
import { Link, useNavigate } from "react-router-dom";

const Navbar = (props) => {
  let navigate = useNavigate();

  const handleLogout = () => {
    localStorage.removeItem("token");
    console.log("hello");
    navigate("/login");
    props.showAlert("User Logged Out succesfully! ", "info");
    
  };

  return (
    <>
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
        <div className="container-fluid">
          <Link className="navbar-brand" to="/">
            Navbar
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul …

我在 NextJS 上构建了一个网站并将其部署在 vercel 上。在本地环境中localhost:3000，它显示背景图像，但在vercel 它上不显示背景图像。

以下是截图

关于维塞尔：

在本地：

我正在使用 tailwindCSS 设置背景图像，我在文件中定义了图像tailwind.config.js并在不同的组件中使用它们。但这不是问题，因为它在本地环境中运行良好。

我不知道它的行为不同的原因是什么。

项目 GitHub 链接： https: //github.com/mohitm15/Weather-Lytics

我有 4 行，每行三个按钮。

《顺风》播放链接

我想要的是

当我单击第一行中 3 个按钮中的任意一个时，然后单击下一行中 3 个按钮中的任意一个，然后单击这些行中的任意一个按钮，然后单击最后两行。

所有单击的按钮都应保持突出显示。

我怎样才能在顺风CSS中实现这一点。

我的研究

我已经搜索并找到了focused状态，但是一旦我单击第二行中的任何按钮，突出显示的内容就会消失在前一行中选择的按钮中。

我的代码

<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12 space-y-6">
  <div class="bg-slate-50 px-28 ">
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login21</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login22</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login23</button>
  </div>
  <div class="bg-slate-50 px-28 ">
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login31</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login32</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login33</button>
  </div>
  <div class="bg-slate-50 px-28 ">
    <button …