我正在开发一个React应用程序并使用Webpack & Typescript。我想在其中一个<img/>标签中使用图像。但是，我没有找到访问图像文件的正确方法。
webpack.config.js :
...
module: {
rules: [
...
{
test: /\.(png|jpe?g|svg)$/,
loader: 'file-loader',
options: {
name: 'assets/[name].[ext]',
}
}
]
应用程序.tsx：
...
render() {
return <img src='/assets/logo-large.png' alt="logo"/>
}
运行应用程序时，assets/logo-large.png找不到资源。
或者，在您的 custom_typings 文件夹（如果有）中，您可以添加一个新import-png.d.ts文件：
declare module "*.png" {
const value: any;
export default value;
}
因此，您可以使用以下方法导入图像：
import myImg from 'img/myImg.png';
或者，正如@mario-petrovic 所报告的，您有时需要使用不同的导出选项，如下所示（export = 语法）。请参阅此处了解两种方法之间的差异：
declare module "*.png" {
const value: any;
export = value;
}
在这种情况下，您可能需要将图像导入为：
import * as myImg from 'img/myImg.png';
在花了一些时间找出解决方案之后，这就是我所做的......
确保您已安装file-loader为开发依赖项
npm install -D file-loader, 如果你使用纱线 yarn add -D file-loader
在Webpack规则中添加文件扩展名对应的loader webpack.config.js，像这样
module: {
rules: [
...,
{
test: /\.(png|jpe?g|gif|jp2|webp)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
],
},
index.d.ts在您的文件旁边创建一个文件tsconfig.json，实际上您可以随意命名它，但您必须遵循第 4 步。
由于 Webpack 现在将处理多个图像扩展，因此您可以添加file-loader支持的其他图像格式
declare module '*.png';
declare module '*.jpg';
转到您的tsconfig.json文件并添加index.d.ts到包含数组，如下所示：
{
"compilerOptions": {
...,
"jsx": "react",
"esModuleInterop": true,
"target": "ES2020",
"moduleResolution": "node"
},
"exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"],
"include": ["src", "index.d.ts"] /// <-- Like this!!
}
请注意，如果您尚未定义include数组，则默认情况下 typescript 会将所有文件添加到根文件夹中，如果您只定义一个文件而不是包含所有代码的文件，则它不会编译。我认为将所有代码放在 src 文件夹中是一个好习惯。
瞧！！
您需要require图像，然后使用该变量作为源，如下所示：
// At the top of the file, with all other imports/requires
const imageSrc = require('/assets/logo-large.png')
...
render() {
return <img src={String(imageSrc)} alt="logo"/>
}
这copy-webpack-plugin也可能会解决您的问题，当您有很多图像时，您可以从一个中央dist文件夹中提供所有图像。
npm install --save-dev copy-webpack-plugin
plugins: [
...
...
new CopyWebpackPlugin([
{from:'src/images',to:'images'}
]),
...
]
不，您可以简单地在图像标签的相对路径上：
<img src='images/your-image.png' />
来源：https : //medium.com/a-beginners-guide-for-webpack-2/copy-all-images-files-to-a-folder-using-copy-webpack-plugin-7c8cf2de7676
实际上，您不需要 webpack 来使用webp图像。此解决方案也适用于基于TypeScript和JavaScript的 React 应用程序。如果您尝试将webp图像作为ReactComponent导入，则 TypeScript 会出现错误。所以你不应该把它作为一个组件导入，而应该只使用图像的来源。检查这个例子：
import img from "./images/image.webp";
现在你可以在你的 像这样标记。
<img src={img} />