在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"
},
],
},
}
我是新来的,所以请不要对愚蠢的错误进行严格的评判。我将感激任何建议!
1条答案
按热度按时间nlejzf6q1#
您可以在webpack.config中使用svg-url-loader npm模块。
在组件中