Webpack & Typescript image import
Solution 1:
Alternatively, in your custom_typings folder (if you have that), you can add a new import-png.d.ts
file:
declare module "*.png" {
const value: any;
export default value;
}
So you can import an image using:
import myImg from 'img/myImg.png';
Alternatively, as reported by @mario-petrovic, you sometimes need to use a different export option as below (export = syntax). See here for the differences between the two approaches:
declare module "*.png" {
const value: any;
export = value;
}
In which case you probably need to import the image as:
import * as myImg from 'img/myImg.png';
Solution 2:
Setup Webpack file-loader, add declaration.d.ts, and voila!
after spending some time to figure out the solution, this is what I did...
Step 1
ensure that you have installed file-loader
as a dev dependency by
npm install -D file-loader
, if you use yarn yarn add -D file-loader
Step 2
add the loader corresponding to the file extension in the Webpack rules webpack.config.js
, like this
module: {
rules: [
...,
{
test: /\.(png|jpe?g|gif|jp2|webp)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
],
},
Step 3
create an index.d.ts
file next to your tsconfig.json
file, actually you can name it whatever you want but you have to follow step 4.
Since Webpack now is going to handle several image extensions so you can add other image formats supported by file-loader
declare module '*.png';
declare module '*.jpg';
Step 4
go to your tsconfig.json
file and add index.d.ts
to the include array like this:
{
"compilerOptions": {
...,
"jsx": "react",
"esModuleInterop": true,
"target": "ES2020",
"moduleResolution": "node"
},
"exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"],
"include": ["src", "index.d.ts"] /// <-- Like this!!
}
be aware that if you haven't defined an include
array, typescript by default is going to add all the files on the root folder, if you just define one file and not the file that contains all your code it is not going to compile. I think is a good practice to have all your code within the src folder.
Voila!!
Solution 3:
You need to require
the image and then use that variable as the source, like so:
// 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"/>
}
Solution 4:
The copy-webpack-plugin
might solve your problem as well, when you have a lot of images you can just serve them all from one central dist
folder.
npm install --save-dev copy-webpack-plugin
plugins: [
...
...
new CopyWebpackPlugin([
{from:'src/images',to:'images'}
]),
...
]
No you can simply at the relative path to your image tag:
<img src='images/your-image.png' />
Source: https://medium.com/a-beginners-guide-for-webpack-2/copy-all-images-files-to-a-folder-using-copy-webpack-plugin-7c8cf2de7676
Solution 5:
Actually, you do not require webpack for using webp images. This solution works for TypeScript and JavaScript based react apps as well. TypeScript gives an error if you try to import webp image as ReactComponent. So you should not import it as a component, but use only the source of image. Check this example:
import img from "./images/image.webp";
Now you can use this src in your tag like this.
<img src={img} />