使用带有typescript的Web包导入react中无法识别的图像模块
我遇到一个问题,在使用webpack加载图像文件时出现以下错误。如果我使用webpack dev服务器运行应用程序,则会显示图像,以便能够将其拉入 文件夹结构如下所示:使用带有typescript的Web包导入react中无法识别的图像模块,typescript,webpack,urlloader,Typescript,Webpack,Urlloader,我遇到一个问题,在使用webpack加载图像文件时出现以下错误。如果我使用webpack dev服务器运行应用程序,则会显示图像,以便能够将其拉入 文件夹结构如下所示: - home -home.tsx -images -test2.png 这是webpack配置文件,我试图在其中模块化要与导入一起使用的图像: const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'
- home
-home.tsx
-images
-test2.png
这是webpack配置文件,我试图在其中模块化要与导入一起使用的图像:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
entry: './src/index.tsx',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.less$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "less-loader"
}
]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use:'url-loader'
},
{
test: /\.(png|jp(e*)g|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 10000,
name: 'images/[hash]-[name].[ext]',
},
}
]
}
]
},
resolve: {
extensions: [ '.ts', '.tsx', '.js' ]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Application Name',
template: path.join(__dirname, 'src/index.html')
})
],
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'dist'),
historyApiFallback: true,
compress: true,
port: 8080
}
};
module.exports = config;
你可以试试看
const testImage = require('../images/test2.png');
因为图像不是模块。所以你不能导入这个
编辑(肖恩)
我们可以使用声明模块'*.png'
查看github中的,您可以尝试
<img src= "./images/test2/png>"
”
它对我很有效Niiice ya我刚刚遇到了这个,而且它工作得很好。想知道我是否能找到一种方法将它作为导入。显然,如果你创建一个带有
declare module'*.png'
的文件,它也会允许你使用导入。继续寻找更干净的方法你也一样!在我的问题点上留下了评论ting在另一篇文章中对此进行了更好的解释。如果其他人遇到了typescript中css/图像的问题,这篇文章最终帮助了我。