5、图片的加载(url-loader)

简介: 5、图片的加载(url-loader)

图片的加载(url-loader)


  • 1、下载依赖包:yarn add url-loader file-loader -D


yarn add url-loader file-loader -D


  • 2、配置loader
  module: {
    rules: [
      // (1)配置css文件解析
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: { publicPath: '../' }
          },
          'css-loader'
        ]
      },
      // (2)配置less文件解析
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: { publicPath: '../' }
          }, 'css-loader', 'less-loader'
        ]
      },
      // (3)配置图片解析
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: '[name].[ext]',
              publicPath: '../image/',
              outputPath: 'images/',
              limit: 8 * 1024,
            }
          }
        ]
      },
    ]
  }
  • 3、yarn build打包,图片放到js文件下
相关文章
|
17天前
|
Java
Java开发实现图片URL地址检验,如何编码?
【10月更文挑战第14天】Java开发实现图片URL地址检验,如何编码?
46 4
|
6月前
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
154 0
|
API Android开发 数据安全/隐私保护
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
900 0
|
2月前
|
数据采集 存储 前端开发
Java爬虫开发:Jsoup库在图片URL提取中的实战应用
Java爬虫开发:Jsoup库在图片URL提取中的实战应用
|
3月前
|
网络协议 前端开发 JavaScript
浏览器加载网页的幕后之旅:从URL到页面展示详解
【8月更文挑战第31天】当在浏览器地址栏输入URL并回车后,一系列复杂过程随即启动,包括DNS解析、TCP连接建立、HTTP请求发送、服务器请求处理及响应返回,最后是浏览器页面渲染。这一流程涉及网络通信、服务器处理和客户端渲染等多个环节。通过示例代码,本文详细解释了每个步骤,帮助读者深入理解Web应用程序的工作机制,从而在开发过程中作出更优决策。
52 5
|
5月前
|
Java 机器人 API
JAVA实现自动打开URL对应的网页并保存为图片-不借助第三方API
JAVA实现自动打开URL对应的网页并保存为图片-不借助第三方API
48 9
|
4月前
|
Web App开发 前端开发
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
123 0
|
4月前
|
JavaScript
js 下载文件(根据URL下载文件,根据URL下载图片)
js 下载文件(根据URL下载文件,根据URL下载图片)
530 0
|
5月前
|
文字识别 API 开发工具
视觉智能开放平台产品使用合集之人像分割抠图返回的图片URL是否可以直接转存到自己的储存桶
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
|
5月前
|
文字识别 算法 API
视觉智能开放平台产品使用合集之在调用接口传入的图片URL参数,文件在本地或者非上海地域OSS链接,该怎么办
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。