5

According to the file-loader usage documentation I should be able to load images like:

test: /\.(png|jpg|gif)$/,
use: [
  {
    loader: 'file-loader',
    options: {}  
  }
]

And later via:

import img from './file.png';

Here is my webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {}
                    }
                ]
            },
            {
                test: /\.glsl$/,
                loader: 'webpack-glsl-loader'
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.ts$/,
                enforce: 'pre',
                loader: 'tslint-loader',
                options: { failOnHint: true }
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
    entry: {
        app: './src/index.ts'
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Output Manager'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    }
};

This is how I am creating my dev-server:

const app = express();

const compiler = webpack(webpackConfig);

app.use(webpackDevMiddleware(compiler, {
    publicPath: webpackConfig.output.publicPath,
}));

app.listen(3000, () => {
    console.log('Listening on port 3000!\n');
});

Further my src structure is something like this:

src
|-images
| |- image.gif
|
|-app.ts

I am tryinbg to load the image in the app.ts as follows:

import img from './images/image.gif';

// ...

private loadImage(): void {
    const image = new Image();
    image.src = img;
    image.onload = () => {

    };
}

Unfortunately I get:

GET http://localhost:8080/undefined 404 (Not Found)

In Chrome's dev-tools navigator I can see the image file under webpack://./src/images/image.gif. The contents look like this:

module.exports = __webpack_public_path__ + "9b626fa0956bfa785b543ef53e895d5e.gif";


//////////////////
// WEBPACK FOOTER
// ./src/images/image.gif
// module id = 109
// module chunks = 0

Also if I hover the img variable while debugging I can see the name string "/9b626fa0956bfa785b543ef53e895d5e.gif". Logging the variable returns undefined though and the image.onload is never triggered.

If I call http://localhost:8080/9b626fa0956bfa785b543ef53e895d5e.gif in the browser I can see the image.

Any idea why I am unable to load the image although I can see it in the browser and the path string seems to be there?

Edit #1:

As I am using TypeScript I had to declare a module in order to import .gif files:

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

Then I found this Github issue where the fix for the issue was to import the file like import * as styles from "styles.scss". So I tried to import like:

import * as img from './images/img.gif';

Unfortunately this results in:

error TS2322: Type 'typeof "*.gif"' is not assignable to type 'string'.

2 Answers 2

4

I see two issues here. First you should try to load your image file like import * as img from './images/img.gif';. You also have to use the image somewhere in order to actually load it. Importing alone does not trigger loading the file. But a simple console.log(img); should trigger it.

The second issue is the reason why you get this exception:

error TS2322: Type 'typeof "*.gif"' is not assignable to type 'string'.

You should try and wrap the actual usage of the imported file like:

if (typeof img === 'string') {
    console.log(img);
}

This way the exception will not be triggered.

I hope this helps.

1
  • Wrapping the call of img into the if clause actually did solve the issue, ty! Jan 2, 2018 at 13:44
0

Here is a snippet of my webpack configuration. This works well for loading images.

{
    test: /\.(gif|png|jpe?g)$/i,
    exclude: [/node_modules/],
    loaders: [
        'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack-loader'
    ]
}
1
  • Can you change path like this. Notice the 2 dots. import * as img from '../images/img.gif';
    – pixlboy
    Dec 18, 2017 at 13:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.