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文件下
相关文章
|
3月前
|
Java
Java开发实现图片URL地址检验,如何编码?
【10月更文挑战第14天】Java开发实现图片URL地址检验,如何编码?
100 4
|
8月前
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
178 0
|
API Android开发 数据安全/隐私保护
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
1128 0
|
4月前
|
数据采集 存储 前端开发
Java爬虫开发:Jsoup库在图片URL提取中的实战应用
Java爬虫开发:Jsoup库在图片URL提取中的实战应用
|
5月前
|
网络协议 前端开发 JavaScript
浏览器加载网页的幕后之旅:从URL到页面展示详解
【8月更文挑战第31天】当在浏览器地址栏输入URL并回车后,一系列复杂过程随即启动,包括DNS解析、TCP连接建立、HTTP请求发送、服务器请求处理及响应返回,最后是浏览器页面渲染。这一流程涉及网络通信、服务器处理和客户端渲染等多个环节。通过示例代码,本文详细解释了每个步骤,帮助读者深入理解Web应用程序的工作机制,从而在开发过程中作出更优决策。
81 5
|
7月前
|
Java 机器人 API
JAVA实现自动打开URL对应的网页并保存为图片-不借助第三方API
JAVA实现自动打开URL对应的网页并保存为图片-不借助第三方API
52 9
|
6月前
|
Web App开发 前端开发
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
165 0
|
6月前
|
JavaScript
js 下载文件(根据URL下载文件,根据URL下载图片)
js 下载文件(根据URL下载文件,根据URL下载图片)
698 0
|
8月前
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
134 0
|
8月前
|
缓存 Java Apache
Spring一行代码搞定图片url地址转换为Base64,超简单!!!!
这段内容讲述了如何将URL指向的图片转换为Base64字符串。首先通过`org.apache.commons.io.IOUtils`或Java标准库读取URL的字节流,然后用Java 8的`Base64`类编码。示例代码提供了两种实现方式:一种依赖Apache Commons IO,另一种仅使用Java内置类。在第二种方式中,自定义了`toByteArray()`方法处理输入流并转换为字节数组,最后关闭输入流释放资源。