前言:

本文演示了

  1. webpack如何在css文件中引入图片;
  2. webpack如何在html中引入图片;

需要安装配置的loader: file-loader;

为何要使用file-loader:

如果我们希望在页面引入图片(包括img的src和background的url)。当我们基于webpack进行开发时,引入图片会遇到一些问题。

其中一个就是引用路径的问题。拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。

安裝file-loader

$ npm i -D file-loader

package.json目前配置:

webpack之引入图片的实现及问题

配置webpack.config.js

webpack之引入图片的实现及问题

在common下新增img文件夹,并添加图片dog.jpeg。

我目前用的项目目录:

webpack之引入图片的实现及问题

示例一、在css中引入我们的图片

编写main.css

webpack之引入图片的实现及问题

在我们的app.js中引入main.css

webpack之引入图片的实现及问题

执行 npm run build构建项目。

示例二、在html中引入图片:重新编辑我们的app.js

webpack之引入图片的实现及问题

执行 npm run build构建项目。

PS:webpack和图片引入的一些问题

问题描述

  • 需要使用<img>标签引入多个图片
  • 理想方案是将图片的相关信息(图片文字,图片相对路径)整合到一个数组imageList
  • 然后对imageList做一个map render出图片列表
const imageList = [
 {id:1,info:'中国银行',uri:'./assets/1.jpg'},
 {id:2,info:'中国农业银行',uri:'./assets/2.jpg'},
 {id:3,info:'中国建设银行',uri:'./assets/3.jpg'}
]

imageList.map((img)=>{
  return (
  <div>
   {img.info}
   <img src={img.uri} />
  </div>
  )
})

但是这样做导致了图片无法找到

发现请求图片路径出现了问题:所有图片请求的路径变成了当前的url拼接uri

换成import image from './assets/1.jpg'将image给src就可以拿到图片

发现这是webpack引入图片的方式

问题原因

Q1:这两种方式的区别?

A2:主要是资源路径的不同

  1. 赋给src相对路径:导致资源请求的路径变成:当前url+src的值
  2. 赋给src import的文件:首先使用import可以返回一个字符串这个字符串是文件被打包之后(在静态目录下)的绝对路径。因此当前请求图片的路径就会变成:端口号+import的值

最后请求图片的路径很好解释:

  • 如果src的值以slash开头那么会被认为是以静态文件为根目录的绝对路径
  • 如果src的值不以slash开头那么会被认为是当前路径的相对路径

总结为:静态服务器可以被当做文件系统看待,这些uri就是文件路径

Q2:图片是如何被webpack打包的?

A2: 仅对于图片的import:

打包时机:在项目中的图片并不是都会被打包的,经过尝试发现通过import或者background:url(image path)引入的图片才会被打包

打包位置:通过对file-loader的设置

{
test: /\.(jpg|png|svg|pdf)$/,
exclude: /font.*\.svg$/,
loader: 'file-loader"htmlcode">
const BANK_LIST = [
 {name: '中国银行', img: './assets/bank-logo-6.png', id: 1},
 {name: '中国建设银行', img: './assets/bank-logo-7.png', id: 2},
 {name: '兴业银行', img: './assets/bank-logo-8.png', id: 3}
]

BANK_LIST.map((bank)=>{
  return (
    <img src={require(bank.img+'')} />
  )
})

我的另外一种解决方案(由于项目中的eslint要求不支持动态引入文件)

使用webpack带的require.context('pathToDirectory')他可以循环的将一个目录下的所有文件引入

const BANK_LIST = {
 './bank-logo-6.png': {name: '中国银行', id: 1},
 './bank-logo-7.png': {name: '中国建设银行', id: 2},
 './bank-logo-8.png': {name: '兴业银行', id: 3}
 }

 const pathToImages = require.context('./assets');
 const originalBankList = pathToImages.keys().map((key) => {
 return Object.assign({}, BANK_LIST[key], {url: pathToImages(key)})
 });
 
//这时候originalBankList的每一项会变成
{name: '中国银行', id: 1,url: "/app/src/containers/WisePort/CheckoutCounterContai…/bank-logo-1.9f949c516315756e18c0cb7d572f4d2c.png"'}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
webpack,引入图片

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“webpack之引入图片的实现及问题”

暂无“webpack之引入图片的实现及问题”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。