Typescript 在pixi.js中创建通过文件加载程序加载的纹理

嗨，我用Webpack、TypeScript和fileloader设置了一个项目

我的

webpack.config.js

：

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        enforce: 'pre',
        loader: 'tslint-loader',
        options: { /* Loader options go here */ }
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },      
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader'
      }
    ]
  },
  devtool: 'inline-source-map',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

My

tsconfig.json

：

{
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "compilerOptions": {
        "noImplicitAny": true,
        "removeComments": true
    },
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
        "*": [
            "node_modules/*",
            "src/types/*"
        ]
    },
    "exclude": [
        "node_modules"
    ]
}

和我的

索引.ts

：

import * as  _ from 'lodash';
import * as PIXI from 'pixi.js';

const renderer = PIXI.autoDetectRenderer(256, 256,
    { antialias: false, transparent: false, resolution: 1 });

document.body.appendChild(renderer.view);

const stage = new PIXI.Container();

renderer.render(stage);

上面的星座图按预期将stage呈现为

index.html

现在我在我的

src/images/

文件夹中添加了一个

bs.png

文件，现在我的项目结构如下所示：

const text = new PIXI.Texture(Image);

据我所知，这个

bs.png

作为文件

/dist/14145c56ece7799954586ba6f8464dbb.png

加载。我的麻烦开始了。我尝试按如下方式加载图像。首先，我创建了一个

custom.d.ts

，其中包括用于加载

.png

文件的模块声明：

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

现在在

index.ts

中，我通过“/images/bs.png”中的

import*作为图像加载它。生成的
Image
为函数类型，console.log（Image）的输出为
14145c56ece7799954586ba6f8464dbb.png
。不幸的是，我无法加载这样的Pixi纹理：

const text = new PIXI.Texture(Image);

通过这句话，我得到：

src/index.ts(12,31): error TS2345: Argument of type 'typeof "*.png"' is not assignable to parameter of type 'BaseTexture'.
  Property 'touched' is missing in type 'typeof "*.png"'.

我明白。我也不能使用：

const texture = PIXI.utils.TextureCache[Image];

尽管图像似乎返回了文件路径。我尝试使用webpack创建的
png
文件路径加载图像，但纹理仍然
未定义

我真的不确定这里真正的问题是什么。我是否需要运行服务器（如express），或者我只是缺少了什么？顺便说一句，这是使用
awesome typescript loader
的
npm run build
命令的输出：

> webpack

Hash: 45f5667bd75205a328bf
Version: webpack 3.4.1
Time: 3297ms
                               Asset     Size  Chunks                    Chunk Names
14145c56ece7799954586ba6f8464dbb.png  4.07 kB          [emitted]
                           bundle.js  4.83 MB       0  [emitted]  [big]  main
  [16] (webpack)/buildin/global.js 509 bytes {0} [built]
  [37] (webpack)/buildin/module.js 517 bytes {0} [built]
  [88] ./src/index.ts 851 bytes {0} [built]
 [192] ./src/images/bs.png 82 bytes {0} [built]
    + 189 hidden modules

您有图像的路径，需要在使用它之前加载它

 PIXI.loader.add([
        Image,
        "and_others_if_any.png",
       ])
        .load(() => {
           var sprite = new PIXI.Sprite(PIXI.Texture.fromImage(Image));

       });

此操作将执行ajax请求，因此您需要从服务器提供这些文件。如果您在linux上，您可以通过从工作目录运行
python-msimplehttpserver 8000
命令来提供服务。
至少我建议在使用之前确保已加载映像。因为在本例中，您尝试从TextureCache检索图像，但我看不到您实际将其添加到缓存的位置。因此，您至少可以使用加载程序：进行此操作。比如：loader.add（'bunny'，'data/bunny.png'）；loader.load（（loader，resources）=>{从缓存中的图像创建精灵}）。。。另外，在创建纹理时，您可能应该使用：let texture=PIXI.texture.fromImage，而不是构造函数