[: currentTime | date:'mm:ss' :] [: timeLeft | date:'mm:ss' :]

加载文件地址

文件结构

.
├── dist/
├── img/
├── node_modules/
├── index.css
├── index.html
├── index.js
├── package.json
└── webpack.config.js

图片下载

webpack.config.js

module.exports = {
  mode   : 'development',
  entry  : './index.js',
  output : {
    filename   : 'bundle.js',
    path       : __dirname + '/dist',
    publicPath : './dist/', // 公开文件相对index.html的地址
  },
  module : {
    rules : [
      // CSS loader
      {
        // 以.css结尾的文件
        test : /\.css$/i,
        use  : [ 'style-loader', 'css-loader' ],
      },
      // 图片 loader
      {
        // 以.jpg、.jpeg、.png或.gif结尾的文件
        test : /\.(jpg|jpeg|png|gif)$/i,
        use  : [
          {
            loader : 'file-loader',
          },
        ],
      },
    ],
  },
};

index.js

import './index.css';
import src from './img/love.jpg';

let img = document.createElement('img');
img.src = src;
document.body.appendChild(img);

index.css

body {
  background: url(./img/love.gif);
}

img {
  max-width: 20em;
}

index.html

<body>
<script src="dist/bundle.js"></script>
</body>

直接转换图片数据

[: currentTime | date:'mm:ss' :] [: timeLeft | date:'mm:ss' :]

文件结构

.
├── dist/
├── img/
├── node_modules/
├── index.html
├── index.js
├── package-lock.json
├── package.json
└── webpack.config.js

图片下载

webpack.config.js

module.exports = {
  mode   : 'development',
  entry  : './index.js',
  output : {
    filename   : 'bundle.js',
    path       : __dirname + '/dist',
    publicPath : './dist/',
  },
  module : {
    rules : [
      {
        test : /\.(jpg|png|jpeg|gif)/i,
        use  : [
          {
            loader  : 'url-loader',
            options : {
              limit : 60 * 1024, // byte
            },
          },
        ],
      },
    ],
  },
};

index.html

<meta charset="UTF-8">

<style>
  .container {
    font-size: 0;
  }

  img {
    width: 33.3333333%
  }
</style>

<div class="container"></div>

<script src="dist/bundle.js"></script>

index.js

import a1 from './img/a1.jpg';
import b1 from './img/b1.jpg';
import c1 from './img/c1.jpg';
import a2 from './img/a2.jpg';
import b2 from './img/b2.jpg';
import c2 from './img/c2.jpg';
import l1 from './img/love.jpg';
import l2 from './img/love.gif';

let container = document.querySelector('.container');
let body      = document.body;

function append (src, parent) {
  let img = document.createElement('img');
  img.src = src;
  parent.appendChild(img);
}

append(a1, container);
append(b1, container);
append(c1, container);
append(a2, container);
append(b2, container);
append(c2, container);
append(l1, body);
append(l2, body);

package.json

{
  "name": "21.x",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "url-loader": "^1.1.2",
    "webpack": "^4.28.1",
    "webpack-cli": "^3.1.2"
  }
}

Q: 使用正常指定地址和data URL在传输上有什么区别?

A: 区别在于前者需要传输,后者无需传输,因为前者记录着资源位置,后者就是资源本身(资源数据)。

[: currentTime | date:'mm:ss' :] [: timeLeft | date:'mm:ss' :]
登录后评论