web-dev-qa-db-ja.com

WebpackおよびTypeScriptイメージのインポート

私はReactアプリケーションに取り組んでおり、Webpack＆TypeScriptを使用しています。 <img/>タグの1つで画像を使用したいと思います。しかし、画像ファイルにアクセスする適切な方法が見つかりませんでした。

webpack.config.js：

 ...
 module: {
        rules: [
            ...
            {
                test: /\.(png|jpe?g|svg)$/,
                loader: 'file-loader',
                options: {
                    name: 'assets/[name].[ext]',
                }
            }
        ]

app.tsx：

...
render() {
    return <img src='/assets/logo-large.png' alt="logo"/>
}

アプリの実行時に、assets/logo-large.pngリソースが見つかりません。

reactjstypescriptwebpack
21
Cosmin SD

または、custom_typingsフォルダー（ある場合）に、新しいimport-png.d.tsファイル：

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

したがって、次を使用して画像をインポートできます。

import myImg from 'img/myImg.png';

または、@ mario-petrovicによって報告されているように、次のように異なるエクスポートオプションを使用する必要がある場合があります（export =構文）。 2つのアプローチの違いについては、 here を参照してください。

declare module "*.png" {
  const value: any;
  export = value;
}

その場合、おそらく次のようにイメージをインポートする必要があります。

import * as myImg from 'img/myImg.png';
18
Erik Vullings

次のように、画像を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"/>
}
14
ahstro