Some base64 images cannot be loaded in background, but the img tag is OK. - Codes Helper

< H2 > scene < / H2 >

use background and img tags to load images. Why is it that both images of the latter load normally, while one of the photos of the former is abnormal?

method 1

html

<div :class="["toast-icon", `toast-icon--${type}`]"></div>

less

.toast-icon {
  margin-bottom: 34px;
  .size(98px, 98px);
  background: no-repeat center / 98px;
  &--true {
    background: url("./true.png");
  }
  &--false {
    background: url("./false.png");
  }
}

result: an error was reported when loading. The key point is that . / true.png can be loaded successfully, while . / false.png cannot

method 2

html

 <img class="toast-icon toast-icon-true" src="./true.png" alt="" v-if="type">
 <img class="toast-icon toasst-icon-false" src="./false.png" alt="" v-else>

less

.toast-icon {
  margin-bottom: 34px;
  .size(98px, 98px);
}

result: normal

< H2 > Environment: < / H2 >

uses the legendary postcss-px-to-viewport plug-in for mobile adaptation. specific introduction

vue-cli: 3.0

postcss.config.js

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "@liaoyinglong/postcss-px-to-viewport": {
      viewportWidth: 750, // (Number) The width of the viewport.
      viewportHeight: 1334, // (Number) The height of the viewport.
      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
      viewportUnit: "vw", // (String) Expected units.
      selectorBlackList: [".ignore", ".hairlines"], // (Array) The selectors to ignore and leave as px.
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
      mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
      exclude: /(\/|\\)(node_modules)(\/|\\)/
    },
    "postcss-viewport-units": {},
    "postcss-cssnext": {},
    "cssnano": {
      preset: ["advanced", {
        autoprefixer: false,
        zindex: false
      }]
    }
  }
}