Skip to content
This repository was archived by the owner on Jan 26, 2019. It is now read-only.

Commit d5e5bb5

Browse files
authoredJan 20, 2018
Merge pull request #231 from joshtynjala/import-images-docs
Documented how to define custom module formats for the TypeScript compiler so that you can import images and other files
2 parents 6b94639 + 934fb11 commit d5e5bb5

File tree

1 file changed

+17
-2
lines changed

1 file changed

+17
-2
lines changed
 

‎packages/react-scripts/template/README.md

+17-2
Original file line numberDiff line numberDiff line change
@@ -623,11 +623,26 @@ Now running `npm start` and `npm run build` also builds Sass files.
623623

624624
With Webpack, using static assets like images and fonts works similarly to CSS.
625625

626-
You can **`import` a file right in a JavaScript module**. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the `src` attribute of an image or the `href` of a link to a PDF.
626+
You can **`import` a file right in a TypeScript module**. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the `src` attribute of an image or the `href` of a link to a PDF.
627627

628628
To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to [#1153](https://github.com/facebookincubator/create-react-app/issues/1153).
629629

630-
Here is an example:
630+
Before getting started, you must define each type of asset as a valid module format. Otherwise, the TypeScript compiler will generate an error like this:
631+
632+
>Cannot find module './logo.png'.
633+
634+
To import asset files in TypeScript, create a new type definition file in your project, and name it something like `assets.d.ts`. Then, add a line for each type of asset that you need to import:
635+
636+
```ts
637+
declare module "*.gif";
638+
declare module "*.jpg";
639+
declare module "*.jpeg";
640+
declare module "*.png";
641+
```
642+
643+
In this case, we've added several image file extensions as valid module formats.
644+
645+
Now that the compiler is configured, here is an example of importing an image file:
631646

632647
```js
633648
import React from 'react';

0 commit comments

Comments
 (0)
This repository has been archived.