在TypeScript中导入图像可以通过以下步骤完成:
{
"compilerOptions": {
"esModuleInterop": true,
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true
}
}
images.d.ts
的文件,用于声明图像文件的模块。在该文件中添加以下内容:declare module '*.jpg';
declare module '*.jpeg';
declare module '*.png';
declare module '*.gif';
declare module '*.svg';
这将告诉TypeScript编译器,这些文件可以作为模块导入。
import
语句导入图像文件。例如,如果你有一个名为logo.png
的图像文件,可以这样导入:import logo from './logo.png';
对于Webpack,你可以使用file-loader
或url-loader
来处理图像文件。在Webpack配置文件中添加以下规则:
module.exports = {
// ...
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
esModule: false,
},
},
],
},
],
},
};
对于Parcel,它已经内置了对图像文件的支持,无需额外配置。
<img>
标签的src
属性:const img = document.createElement('img');
img.src = logo;
document.body.appendChild(img);
这样就可以将图像成功导入到TypeScript中了。
请注意,以上步骤是基于常见的构建工具和模块解析器的假设。具体的配置可能因项目而异。如果你使用的是其他构建工具或模块解析器,请参考它们的文档以获取正确的配置方法。
领取专属 10元无门槛券
手把手带您无忧上云