主页 / coding / 问题 / 77389962
Accepted
NatIndustrial
Asked: 2023-10-30 23:31:27 +0800 CST

资产导入未正确解决，我需要做额外的事情吗？

  • 772

因此，当我尝试使用导航栏时，我遇到了一个问题，因为我需要导入一个 NavLinks 数组，其中包含 navLinks 的文本，我在名为“constants”的文件夹内的 index.js 中将其创建为数组在 src 里面。

这就是我将其导入 Navbar.jsx 的方式

import { useState } from "react";
import { navLinks } from "../constants";

const Navbar = () => {
  return (
  <div>home</div>  )
}

export default Navbar

这就是我的文件index.js 的样子。

import { agile, behanceLogo, design_minded_icon, discordLogo, envelopeIcon, girlDesk3D, githubLogo, sassLogo, cssLogo, htmlLogo, javascriptLogo, linkedInLogo, messageIcon, mongodbLogo, moonIcon, multiculturalIcon, nodejsLogo, paperplaneIcon, personIcon, profile_bewerbung_foto, reactLogo,typescript_logo, paperplaneIcon, backtoTop } from "../assets";

export const navLinks = [
    {
        id: "home",
        title: "Home",
    },
    {
        id: "work",
        title: "Work"
    },
    {
        id: "about",
        title: "About"
    },
    {
        id: "contact",
        title: "Contact"
    }
];

export const features = [
    {
        id: "feature-1",
        icon: agile,
        title: "Agile",
        content: "Experience with a methodology that emphasizes collaboration and continuous improvement.", 
    },
    {
        id: "feature-2",
        icon: design_minded_icon,
        title: "Design-minded",
        content: "The driving aspect for any of my designs has a start in the consideration of human interaction and focus on the design principles.", 
    },
    {
        id: "feature-3",
        icon: multiculturalIcon,
        title: "Multicultural",
        content: "I am an adaptable individual who has had experience working in a multicultural team.", 
    },
]

export const about = 
    {
        title: "about",
        parragraf1: "Hi there! 👋🏻 , My name is Nathalia Padron. I am originally from Caracas, Venezuela and I am currently based in Stuttgart, since 2016.",
        parragraf2: "Before making the leap into Front-end Design I studied Product Design in IDC ( Instituto de Diseno de Caracas ) and worked several years as a Grafic Designer in Germany and Venezuela.",
        parragraf3: "I feel comfortable working with CSS and JavaScript and I continue to learn React, I would love to extend my skillset to perform tasks related to UX/UI. Also, I have recently received a certification in MERN Stack and continue to learn and develop my understanding towards the backend.",
        recently: "Recently I have been working with the following technology Stack",
        logos: [
            htmlLogo,
            cssLogo,
            javascriptLogo,
            sassLogo,
            typescript_logo,
            reactLogo,
            nodejslogo,
            mongodbLogo,
        ],
    }

    export const technologieStack = [
        {
            title1: "Libraries & Frameworks",
            technologies: 
            [
                "Tailwind CSS",
                "Bootstrap",
                "Sass",
                "React",
            ]
        }, 
        {
            title2: "Design Tools",
            technologies: 
            [
                "GoogleFonts",
                "Figma",
                "Canva",
            ]
        },
        {
            title3: "Other Tools",
            technologies: 
            [
                "VS Code",
                "Git + Hub",
                "Azure DevOps",
                "Chrome Dev Tools",
            ]
        },
    ]
        
export const cards = [
    {
        name: "MLAY TOURS",
        content: "A MERN Stack project developed as a last project for a bootcamp I finished at DCI. Worked with a customer and developed brand identity.",
        link: "",
    }
]

export const contactForm = {
    parragraf1: "I'm interested in a position within a team environment in a Web Agency working on large and creative projects.",
    parragraf2: "However, if you have a request or question, don't hesitate to use this form.",
    inputs: [
        {
            name: "Full name",
            icon: personIcon,
        },
        {
            name: "E.g [email protected]",
            icon: envelopeIcon,
        },
        {
            name: "leave me a Message",
            icon: messageIcon,
        },
    ],
    sendbutton: "send",
    icon: paperplaneIcon,
}

export const footer = [
    {
        id: "social-media-1",
        icon: linkedInLogo,
        link: "",
    },
    {
        id: "social-media-2",
        icon: behanceLogo,
        link: "",
    },
    {
        id: "social-media-3",
        icon: githubLogo,
        link: "",
    },
    {
        id: "social-media-4",
        icon: discordLogo,
        link: "",
    },
    {
        id: "goTotop",
        icon: backtoTop,
        link: "",
    },
  ];

该应用程序崩溃并显示“无法解析来自“src/constants/index.js”的导入“../assets”。

它抱怨是因为在index.js（我在其中创建了包含网站文本和徽标的所有对象）内部有一个无法解析的导入，“assets”文件夹的路径显然是错误的。我检查了文件夹结构，它似乎是正确的。资产文件夹与源代码中的组件和常量文件夹位于同一级别。我需要做一些额外的事情来确保图像被导入吗？

我所做的是将所有 png 放入此资产文件夹中，我只是以这种方式编写导入：

import { agile, behanceLogo, design_minded_icon, discordLogo, envelopeIcon, girlDesk3D, githubLogo, sassLogo, cssLogo, htmlLogo, javascriptLogo, linkedInLogo, messageIcon, mongodbLogo, moonIcon, multiculturalIcon, nodejsLogo, paperplaneIcon, personIcon, profile_bewerbung_foto, reactLogo,typescript_logo, paperplaneIcon, backtoTop } from "../assets";

大括号内提供的名称是每个 png 的名称

import

1 个回答

  1. Best Answer

    我快速查看了你的 GitHub 个人资料，让我找到了有问题的存储库。

    问题：您尝试通过命名导入从文件夹导入多个文件。不幸的是，这不是命名导入的工作方式。

    import { ... } from "../assets"尝试解析该文件夹中不存在的索引文件（index.ts(x)或）。index.js(x)这些文件也称为桶文件。请参阅： https: //basarat.gitbook.io/typescript/main-1/barrel

    解决方案：

    通过默认导入直接引用要导入的图像文件 import ReactLogo from "../assets/reactLogo.png"

    作为替代方案，您还可以提供一个索引文件，它将图像文件重新导出为命名导出

    // assets/index.js

export { default as ReactLogo } from "./reactLogo.png";
export { default as TypeScriptLogo } from "./typescript_logo.png";


// index.js
import { ReactLogo, TypeScriptLogo } from "../assets"
    • 0

相关问题