webpack react应用程序中的图像问题

nwlqm0z1  于 2022-11-24  发布在  Webpack
关注(0)|答案(1)|浏览(131)

在react中使用图像时,要么是 typescript 有问题,要么是网站上的图像断裂。
为了解决这个问题,我试过:
1.将URL加载程序和文件加载程序添加到webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const BUILD_PATH = path.resolve(__dirname, './build');
const SRC_PATH = path.resolve(__dirname, './src/');
const PUBLIC_PATH = path.resolve(__dirname, './public')

module.exports = {
  entry: SRC_PATH + '/index.tsx',

  output: {
    path: BUILD_PATH,
    filename: 'bundle.js',
  },

  mode: process.env.NODE_ENV || 'development',

  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    extensions: [ '.tsx', '.ts', '.js' ],
  },

  devServer: {
    static: PUBLIC_PATH,
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      },
      {
        test: /\.(css|scss)$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.module.css$/,
        use: [
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
        ],
      },
      {
        test: /\.(jpg|png|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 8192,
        },
      },
      {
        test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
        use: ['file-loader']
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'public', 'index.html'),
    }),
  ],
};

1.将图像导入为组件

import React from 'react';

import logo from './header-logo.svg';

import styles from './Header.module.scss';

export const Header = () => {
  return <header className={styles.header}>
    <img src={logo} />
  </header>
};

1.在src/types目录中创建images.d.ts文件

declare module "*.svg" {
  const content: any;
  export default content;
}

1.我甚至试过svgr。
但是没有任何帮助,如果我删除images.d.ts文件,typescript在导入时无法检测到模块,使用images.d.ts时,vscode不显示错误,但图片在浏览器中不显示,而且代替正常路径的是一些奇怪的数据:image/svg+xml;一种基于64位总线的通信系统,包括:
为了以防万一,我附加了tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./build/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "plugins": [
      {
        "name": "typescript-plugin-css-modules"
      },
    ],
  },
}

我是新来的,所以请不要对愚蠢的错误进行严格的评判。我将感激任何建议!

nlejzf6q

nlejzf6q1#

您可以在webpack.config中使用svg-url-loader npm模块。

{
        test: /\.svg$/,
        use: [
          {
            loader: "svg-url-loader",
            options: {
              limit: 10000,
            },
          },
        ],
      },

在组件中

// pass a correct path
import logo from './header-logo.svg';

 <img src={logo} alt="" />

相关问题