三、loader----file-loader和url-loaderr(加载图片的loader)

最新推荐文章于 2024-09-10 09:02:43 发布
原创 最新推荐文章于 2024-09-10 09:02:43 发布 · 527 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在实际开发中通过file-loader和url-loader来处理背景图片和img标签的图片引入，包括base64转换和文件路径设置。重点讲解了两者之间的区别与安装配置方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、file-loader

**实际开发中，引入图片一般有两种，img和background-image,

1.1、background-image设置背景图

在这里插入图片描述
1111111
这里的类名hulu1改为了hulu;

然后安装file-loader

方法：npm install file-loader -D

配置：
在这里插入图片描述

1.2 img图片引入

在这里插入图片描述
**

注意img引入的时候必须像上图这样把图片当做一个模块，先导入在赋值给img.src

**

配置方法和background-image一样，不需要重复配置。

然后执行命令，两种图片就打包在build文件夹下了，并且webpack会自动找打包好的文件路径，不需要修改。
在这里插入图片描述

2、url-loader

功能和file-loader一样，但是可以将文件较小的图片转化为base64位的URI
使用方式和配置与file-loader基本一样
只需要把file-loader改为url-loader，对了，前提还是得安装url-loader

2.1、怎么把娇小的图片转换为base64位的URI？

在这里插入图片描述

3、怎么设置文件的存放路径

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2022-03-25 redis哨兵+主从的组建及failover流程
悟世之路
03-25 412
目录 摘要: 哨兵+主从的组建: 哨兵控制failover: 哨兵源码: 摘要: 记录redis哨兵+主从的组建及failover流程, 由于是动态结构, 所以主要是时序图. 哨兵+主从的组建: 哨兵控制failover: 哨兵源码: /* Redis Sentinel implementation * * Copyright (c) 2009-2012, Salvatore Sanfilippo <antirez at gmail dot
加载图片
印心石屋
03-17 445
引用three.js var loader=new THREE.TextureLoader(); loader.load('xx.jpg",function(tex){ //图片加载完成，执行如下代码 obj.material.map=tex;//物体贴图 });
webpack安装依赖file-loader
abcb8888的博客
04-20 1450
TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received undefined at validateString ）学习webpack时，通常会因为版本高低而导致配置不兼容。例如，我今天在学习微webpack时，当安装了file-loader依赖时便报上面这样的错。我这里的webpack版本为3.6.0，安装的file-loader版本为6.2.0。通过之前的学习，可以得出file-loade
处理图片的loader: file-loader
qq_45178972的博客
06-06 2197
要处理jpg、png等格式的图片，我们也需要有对应的loader： file-loader file-loader的作用就是帮助我们处理import/require()等方式引入的一个文件资源，并且会将它放到我们输出的文件夹中； 当然也可以修改它的名字和所在文件夹 安装该loader npm install file-loader -D 使用require或import引用图片资源 img.src = require('../image/1.jpg').default; -----------------
webpack loader file-loader url-loader
weixin_45002586的博客
11-14 854
webpack loader file-loader url-loader
webpack-file-loader
qq_41893334的博客
05-18 2114
1.什么是loader? webpack的本质是一个模块打包工具, 所以webpack默认只能处理JS文件,不能处理其他文件, 因为其他文件中没有模块的概念, 但是在企业开发中我们除了需要对JS进行打包以外, 还有可能需要对图片/CSS等进行打包, 所以为了能够让webpack能够对其它的文件类型进行打包, 在打包之前就必须将其它类型文件转换为webpack能够识别处理的模块, 用于将其它类型文件转换为webpack能够识别处理模块的工具我们就称之为loader 2.如何使用loader webpack中的
Redis集群搭建：cannot load such file -- redis (LoadError)
所及之物皆黎明
12-01 3834
目录 一、搭建 Redis 集群时报错：cannot load such file -- redis (LoadError) 二、错误原因 三、Ruby、RubyGems、redis-xxx.gem 与 redis-trib.rb 四、度娘提供的解决方式的实践记录 五、博主的解决方法 一、搭建 Redis 集群时报错：cannot load such file -- redis (LoadError) 搭建 Redis 集群时，在 /opt/redis-3.2.5/src 下输入以下指令.
Ubuntu上安装gem包时报`require': cannot load such file -- openssl (LoadError)
ProgrammingWJF的专栏
09-18 1981
在安装一个gem (nokogiri) 时报里如标题所示到错误,于是网上搜索里一下，发
系统报错第五步的第三行代码 train_loader是未解析的引用
最新发布
03-18
根据用户提供的引用信息，特别是引用[2]和[4]，看起来这个问题可能与PyTorch的数据加载器（DataLoader）相关，尤其是在使用单进程数据加载时的属性错误。 首先，用户提到的错误是“未解析的引用”，这在Python中...
【跳坑日记】Ubuntu 16.04安装 Ruby2.7.0遇到的坑：cannot load such file — openssl (LoadError)
01-20
在本文中，我们将探讨在Ubuntu 16.04系统上安装Ruby 2.7.0时遇到的一个常见问题：`cannot load such file — openssl (LoadError)`。这是一个与Ruby和OpenSSL库集成有关的问题，通常发生在试图安装或运行依赖于...
Webpack contrib之file-loader教程
gitblog_00167的博客
09-10 590
Webpack contrib之file-loader教程 1. 项目介绍 file-loader 是一个广泛应用于Webpack构建流程的加载器。它的核心职责是处理并导出各种静态资源（如图片、字体文件等），将其移动到输出目录，并返回一个相对于输出目录的URL路径。这使得在CSS或JavaScript中引用这些静态资源时，能够正确地指向它们的新位置。file-loader尤其适用于那些需要保持文件...
webpack 图片文件处理：url-loader和file-loader
qq_46112274的博客
02-15 1206
1、webpack 图片文件处理 1.1、图片文件处理方式一：url-loader 1.2、图片文件处理方式2：file-loader 1.3、图片文件处理-修改文件名称 2、安装loader 安装图片文件处理loader的参考文档 npm install --save-dev url-loader@1.1.2 3、配置 { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options:
webpack--图片处理：file-loader和url-loader
小毛贼_哪里逃
04-01 357
file-loader 1 安装file-loader:npm i -D file-loader@2 { "name": "demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\...
Vue2之webpack篇（二）Loader
申小兮和林小兮的博客宝
04-12 7996
loader处理css、图片、ES6转ES5、打包，分离vue，父子组件传参
Vue基础知识总结 9：vue webpack打包原理
热门推荐
学Java，找哪吒
10-06 2万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、优快云哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 一、前端模块化 webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。 并且不仅仅是JavaScript文件，还有CSS、图片、json文件等等，在webpack中都可以被当做模块来使用。 二、打
6. file-loader加载资源
m0_71902265的博客
11-07 201
file-loader加载资源
webpack之常见的loader使用（三）
trenki的博客
07-28 786
1.file-loader npm install file-loader -D 主要用来加载静态文件，例如.txt .md .png .word .pdf等等。原理是把打包入口识别的资源模块，移动至输出目录，并返回一个地址名称 module: { rules: [{ test: /\.(png|jpe?g|gif)$/, //use使⽤⼀个loader可以⽤对象，字符串，两个loader需要⽤数组 use: { loader: "file-loader", // option
file-loader 使用教程
gitblog_00004的博客
06-07 629
file-loader 使用教程 1. 项目介绍 file-loader 是一个用于处理文件导入的 Webpack 加载器。它可以将文件（如图片、字体等）转换为 URL，并将这些文件输出到指定的目录中。file-loader 主要用于在 Webpack 构建过程中处理静态资源文件，使得这些文件可以在 JavaScript 模块中被正确引用。 2. 项目快速启动 安装 首先，你需要安装 file-l...
webpack的相关配置，以及使用webpack打包文件时用到的loader以及相关插件的使用
2401_84152177的博客
05-15 1060
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值