图片处理(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. GitHub 热点速览 Vol.14:周获 2k+ Vim 掀起三维编程风

    作者:HelloGitHub-小鱼干 摘要(用于 公众号/博客园等地方)寓教于乐,应该是上周 Trending 的主题了,无论是被多人转发推荐的三维 Vim 项目 Vim³ 或者是流体运动的 WebG ...

  2. 性能优化之三:将Dottrace过程加入持续集成

    之前分享过一篇如何做接口性能分析的文章,但是整个分析过程有点繁琐,需要写一个控制台程序调用被测接口,再预热.启动dottrace追踪,最后才能得到我们想要的性能分析报告.如果有办法一键生成性能分析报告 ...

  3. CTR学习笔记&代码实现2-深度ctr模型 MLP->Wide&Deep

    背景 这一篇我们从基础的深度ctr模型谈起.我很喜欢Wide&Deep的框架感觉之后很多改进都可以纳入这个框架中.Wide负责样本中出现的频繁项挖掘,Deep负责样本中未出现的特征泛化.而后续 ...

  4. Prthon多线程和模块

    Prthon多线程和模块 案例1:简化除法判断 案例2:分析apache访问日志 案例3:扫描存活主机 案例4:利用多线程实现ssh并发访问 1 案例1:简化除法判断 1.1 问题 编写mydiv.p ...

  5. pyecharts数据可视化模块

    目录 安装 柱状图-Bar 饼图-Pie 箱体图-Boxplot 折线图-Line 雷达图-Rader 散点图-scatter 我们都知道python上的一款可视化工具matplotlib,而前些阵子 ...

  6. web自动化浏览器chrome和驱动chromedriver

    1.web自动化下载浏览器和对应的浏览器驱动,以谷歌浏览器为例 电脑上安装谷歌浏览器,查看谷歌浏览器的版本,输入chrome://settings/help 2.chromedriver国内镜像地址h ...

  7. Scratch 全套学习资料

    链接:https://pan.baidu.com/s/1qX0T2B_zczcLaCCpiRrsnA提取码:xfp8

  8. VUE_shop(第十天)项目的打包优化

    项目的打包优化 1.添加页面的加载效果 1.首先安装运行依赖nprocess,在main.js文件中的axios拦截器拦截请求的时候调用Npeocees.start. 在拦截响应的时候调用nproce ...

  9. 详解java访问修饰符

    详解java访问修饰符 为了防止初学者看到因为专业的术语而感觉晦涩难懂,我接下来尽量用生动比喻的说法来解释!首先第一点,我们来讲讲什么叫修饰符!看看这个名称,想想他的意思.修饰符!修饰符!,就是用来修 ...

  10. tcp长连接、短连接、连接池的思考

    在基于tcp的 rcp实现方式中,有如下几种选择: 1. 长连接:同步和异步方式. 同步方式下客户端所有请求共用同一连接,在获得连接后要对连接加锁,在读写结束后才解锁释放连接,性能低下,基本很少采用, ...