图片处理(file-loader)

引用时出现的问题

在js中引入图片并添加到页面

let img = new Image();
img.src = './logo.png'
document.body.appendChild(img)

执行npm run dev

查看之后发现这个图片加载不出来,也就是说图片并没有被打包出来,此处的路径找不到图片

所以我们需要将图片以资源的形式引入进来

import logo from './logo'	//此时logo为一个文件名
let img = new Image();
img.src = logo
document.body.appendChild(img)

注意:若使用require方式引入时引入的是一个对象,需要不同的处理方式(有兴趣的朋友可以自己打印出来看下)

let logo = require ('./logo')	//此时logo为一个文件名
let img = new Image();
img.src = logo.default //此处有变动
document.body.appendChild(img)

此时执行npm run dev发现由于缺少一个loader报错

解决问题

此处我们需要的是一个file-loader

npm i file-loader -D

在web.config.js中匹配对应的规则

{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
}

在此执行npm run devok 执行完成

webpack4 图片加载的更多相关文章

  1. Android中常见的图片加载框架

    图片加载涉及到图片的缓存.图片的处理.图片的显示等.而随着市面上手机设备的硬件水平飞速发展,对图片的显示要求越来越高,稍微处理不好就会造成内存溢出等问题.很多软件厂家的通用做法就是借用第三方的框架进行 ...

  2. 强大的图片加载框架Fresco的使用

    前面在卓新科技有限公司实习的时候,在自己的爱吖头条APP中,在图片异步加载的时候和ListView的滑动中,总会出现卡顿,这是因为图片的缓存做的不是足够到位,在项目监理的帮助下,有使用Xutils框架 ...

  3. Android之图片加载框架Fresco基本使用(二)

    PS:最近看到很多人都开始写年终总结了,时间过得飞快,又到年底了,又老了一岁. 学习内容: 1.进度条 2.缩放 3.ControllerBuilder,ControllerListener,Post ...

  4. ios新手开发——toast提示和旋转图片加载框

    不知不觉自学ios已经四个月了,从OC语法到app开发,过程虽然枯燥无味,但是结果还是挺有成就感的,在此分享我的ios开发之路中的小小心得~废话不多说,先上我们今天要实现的效果图: 有过一点做APP经 ...

  5. Fresco从配置到使用(最高效的图片加载框架)

    Frescoj说明:      facebook开源的针对android应用的图片加载框架,高效和功能齐全. 支持加载网络,本地存储和资源图片: 提供三级缓存(二级memory和一级internal ...

  6. iOS 正确选择图片加载方式

    正确选择图片加载方式能够对内存优化起到很大的作用,常见的图片加载方式有下面三种: //方法1 UIImage *imag1 = [UIImage imageNamed:@"image.png ...

  7. iOS 解决LaunchScreen中图片加载黑屏问题

    iOS 解决LaunchScreen中图片加载黑屏问题 原文: http://blog.csdn.net/chengkaizone/article/details/50478045 iOS 解决Lau ...

  8. imagepool前端图片加载管理器(JavaScript图片连接池)

    前言 imagepool是一款管理图片加载的JS工具,通过imagepool可以控制图片并发加载个数. 对于图片加载,最原始的方式就是直接写个img标签,比如:<img src="图片 ...

  9. Android之图片加载框架Fresco基本使用(一)

    PS:Fresco这个框架出的有一阵子了,也是现在非常火的一款图片加载框架.听说内部实现的挺牛逼的,虽然自己还没研究原理.不过先学了一下基本的功能,感受了一下这个框架的强大之处.本篇只说一下在xml中 ...

随机推荐

  1. Hystrix 使用手册 | 官方文档翻译

    由于时间关系可能还没有翻译全,但重要部分已基本包含 本人水平有限,如有翻译不当,请多多批评指出,我一定会修正,谢谢大家.有关 ObservableHystrixCommand 我有的部分选择性忽略了, ...

  2. Day20-tomcat

    tomcat 一.Java及tomcat简介 二.安装JDK及tomcat 1.安装jdk 安装jdk很简单,首先下载网上的jdk安装包,我这边下载的是jdk-8u221-linux-x64.tar. ...

  3. on duplicate key update 的用法说明(解决批量操作数据,有就更新,没有就新增)mybatis批量操作数据更新和添加

    项目用的ORM框架是用springdatajpa来做的,有些批量数据操作的话,用这个效率太低,所以用mybatis自己写sql优化一下. 一般情况,我们肯定是先查询,有就修改,没有就添加,这样的话,单 ...

  4. PTA | 1029 旧键盘 (20分)

    旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及实际被输入的文字,请你列出肯定坏掉的那些键. 输入格式: 输入在 2 行中分别给出应该输入的文字.以及 ...

  5. springmvc <mvc:resource /> 标签使用

    <!-- 配置静态资源 --><mvc:resources location="/static/" mapping="/static/**"/ ...

  6. 按公式产生随机数、java中的重载、递归、有关计算机计算的问题

    1.按公式产生随机数x1=(16807*x)%(Integer.MAX_VALUE)x=x1;通过这个公式进行随机数的产生,当产生的数字大于2e+32-2时,在用产生随机数的方式进行数字的输出.主要思 ...

  7. Linux基础篇,正则表达式

    一.正则表达式特殊符号: 二.grep的用法 grep [-A|B|a|c|i|n|v] [--color=auto] '搜索字串' filename -A ===> after缩写,后面接数字 ...

  8. spark error Caused by: java.io.NotSerializableException: org.apache.hadoop.hdfs.DistributedFileSystem

    序列化问题多事rdd遍历过程中使用了没有序列化的对象. 1.将未序列化的变量定义到rdd遍历内部.如定义入数据库连接池. 2.常量定义里包含了未序列化对象 ,提出去吧 如下常量要放到main里,不能放 ...

  9. 在IDEA中搭建Java源码学习环境并上传到GitHub上

    打开IDEA新建一个项目 创建一个最简单的Java项目即可 在项目命名填写该项目的名称,我这里写的项目名为Java_Source_Study 点击Finished,然后在项目的src目录下新建源码文件 ...

  10. 如何用python批量生成真实的手机号码

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:Python测试社区 1目 标 场 景 平时在工作过程中,偶尔会需要大 ...