相关疑难解决方法(0)

我正在使用webpack来管理reactjs项目.我想通过webpack在javascript中加载图像file-loader.下面是webpack.config.js:

const webpack = require('webpack');
const path = require('path');
const NpmInstallPlugin = require('npm-install-webpack-plugin');

const PATHS = {
    react: path.join(__dirname, 'node_modules/react/dist/react.min.js'),
    app: path.join(__dirname, 'src'),
    build: path.join(__dirname, './dist')
};

module.exports = {
    entry: {
        jsx: './app/index.jsx',
    },
    output: {
        path: PATHS.build,
        filename: 'app.bundle.js',
    },
    watch: true,
    devtool: 'eval-source-map',
    relativeUrls: true,
    resolve: {
        extensions: ['', '.js', '.jsx', '.css', '.less'],
        modulesDirectories: ['node_modules'],
        alias: {
            normalize_css: __dirname + '/node_modules/normalize.css/normalize.css',
        }
    },
    module: {
        preLoaders: [

            {
                test: …

我在我的小学习 NextJS 和 TypeScript 项目的界面上遇到了困难。我以为我已经解决了这个问题，但是当涉及到我的组件src上的 prop时，我正在处理 Header.tsx 上的问题Header。我不断收到以下错误消息

类型“StaticImageData”不可分配给类型“string”。预期的类型来自属性“src”，该属性在类型“IntrinsicAttributes & ILogo & {children?: ReactNode;”上声明。}'

我仍然对理解儿童道具以及如何使它们从父母流向孩子充满信心，这使得这样的错误有点令人沮丧。

我已经在下面发布了脚趾代码，并欢迎提出建议，以解决眼前的问题，以及将来缓解此问题的方法。

标头.tsx

import React from "react";
import Navbar from "./Navbar/Navbar";
import Logo from "../Logo";
import companyLogo from "../../../public/assets/images/logo.png";
import { ILogo } from "../../types/headerType";

const Header = () => {
  return (
    <div className="container flex justify-between h-16 max-w-full bg-pink-400 h-100px">
      <Logo className="object-cover" src={companyLogo} />
      <Navbar />
    </div>
  );
};

export default Header;

标志.tsx

import Image from "next/image";
import Link from "next/link"; …