1、webpack.config.js

resolve: {

  extensions: ["ts", "tsx", "js", "jsx"],

  alias: {

    images: path.resolve(__dirname, 'src/images/'

  )}

}

2、tsconfig.json

{
"compilerOptions": {
"baseUrl": ".",
"paths: {
"images/*": ["src/images/*"]
}
}
}

3、declare images.d.ts

declare module '*.png'
declare module '*.gif'
declare module '*.jpeg'
declare module '*.jpg'

4、webpack.config.js

{
test: /\.(gif|jpg|png|woff|svg|eot|ttf|otf|woff2)\??.*$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
}

5、import * as Img from "./path/to/image.png";

react: typescript import images alias的更多相关文章

  1. react + typescript 学习

    react,前端三大框架之一,也是非常受开发者追捧的一门技术.而 typescript 是 javascript 的超集,主要特点是对 类型 的检查.二者的结合必然是趋势,不,已经是趋势了.react ...

  2. react typescript jest config (一)

    1. initialize project create a folder project Now we'll turn this folder into an npm package. npm in ...

  3. 使用react搭建组件库:react+typescript+storybook

    前期准备 1. 初始化项目 npx create-react-app react-components --template typescript 2. 安装依赖 使用哪种打包方案:webpack/r ...

  4. React动态import()

    React动态import() react-router@v4代码分离,推荐的import().这里分享webpack配置和使用方法. 首先安装两个必须的包 cnpm i react-loadable ...

  5. React + Typescript领域初学者的常见问题和技巧

    React + Typescript领域初学者的常见问题和技巧 创建一个联合类型的常量 Key const NAME = { HOGE: "hoge", FUGA: "f ...

  6. 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目

    一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...

  7. 一次解决React+TypeScript+Webpack 别名(alias)找不到问题的过程「转载」

    链接 引言 在组件开发中,业务功能和基础组件一般分开放,比如在我们的项目中,components为基础组件, container为业务组件,但是在container中调用components中的组件时 ...

  8. react+typescript报错集锦<持续更新>

    typescript报错集锦 错误:Import sources within a group must be alphabetized.tslint(ordered-imports) 原因:impo ...

  9. React & TypeScript

    之前看了一下 TypeScript 的知识,但是一直没有上手,最近开始结合 React 和 TypeScript 一起尝试了一下,感受还是很好的,所以写一下笔记. 环境配置没有参考其他东西,就是看了下 ...

随机推荐

  1. 十个python图像处理工具

    介绍 如今的世界存在了大量的数据,图像数据是重要的组成部分.如果要利用这些图片,需要对图像进行处理,提高图片质量或提取图片内容信息. 图像处理的常见操作包括图像显示,基本操作如裁剪,翻转,旋转等,图像 ...

  2. [RH134] 10-NFS和Samba客户端

    NFS和samba服务器的配置,请参考: 这里,我们只讨论客户端的使用 1.NFS客户端的使用 nfs实现的是类Unix系统之间的远程共享目录. 假设我们已经有一个提供nfs服务的服务器,IP为192 ...

  3. 从零开始编译安装 Extcalc

    Extcalc 是个非常强大的计算器,同时也是一个非常老的软件包,已经不再更新.希望使用 apt-get 或是 dnf 安装已经不可能,更何况我是在 mips 的龙芯 3A 上.唯一的方法就是编译安装 ...

  4. Java实验五参考答案

    1.找错误 btOK.setOnAction( new EventHandler<ActionEvent> { public void handle (ActionEvent e) { S ...

  5. @RequestBody和@RequestParam的使用详解

    此次分享转载至:https://blog.csdn.net/justry_deng/article/details/80972817 这边文章讲解的比较透彻,主要是在springboot项目中进行使用 ...

  6. storm学习初步

    本文根据自己的了解,对学习storm所需的一些知识进行汇总,以备之后详细了解. maven工具 参考书目 Maven权威指南 官方文档 Vagrant 分布式开发环境 博客 storm 参考书目 Ge ...

  7. Pytest系列(8) - 使用自定义标记mark

    如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html 前言 pytest 可以支持自定义 ...

  8. JS同步和异步的理解

    js的同步和异步问题通常是指ajax的回调,如果是同步调用,程序在发出ajax调用后就会暂停,直到远程服务器产生回应后才会继续运行.而如果是异步调用,程序发出ajax调用后不会暂停,而是立即执行后面的 ...

  9. Shell脚本的编写及测试

                                                      Shell脚本的编写及测试 1.1问题 本例要求两个简单的Shell脚本程序,任务目标如下: 编写一 ...

  10. LeetCode#141-Linked List Cycle-环形链表

    一.题目 给定一个链表,判断链表中是否有环. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始). 如果 pos 是 -1,则在该链表中没有环. 示例 1 ...