background-image 加载图片失败显示默认图片

这个问题通常是由于图片路径出错或者图片不存在导致的。可以通过检查图片路径是否正确以及图片是否存在来解决问题。另外，还可以考虑使用 CSS 的 background-image 的 fallback 机制来显示默认图片，例如可以在 background-image 中同时指定多张图片，第一张是需要显示的图片，如果加载失败则显示第二张图片，以此类推。

相关问题

css实现图片未加载完成时占位显示

可以通过设置图片的占位符来实现图片未加载完成时的占位显示。具体做法如下：

1. 首先，为图片设置一个默认的占位符，例如使用一个背景色填充的方框作为占位符。

2. 当图片加载完成后，将占位符替换为实际的图片。

3. 如果图片加载失败，则可以显示一个错误提示，或者继续显示占位符。

下面是一个实现图片占位符的示例代码：

<style>
  .placeholder {
    background-color: #ccc;
    width: 100px;
    height: 100px;
  }
</style>

<div>
  <img class="placeholder" src="placeholder.png" data-src="image.jpg" alt="Image" />
</div>

<script>
  var images = document.querySelectorAll('img');

  function loadImage(img) {
    var src = img.getAttribute('data-src');
    img.setAttribute('src', src);
  }

  images.forEach(function(img) {
    if (img.complete) {
      loadImage(img);
    } else {
      img.addEventListener('load', function() {
        loadImage(img);
      });
    }
  });
</script>

在上面的示例代码中，我们使用了一个 `.placeholder` 类来定义图片的占位符样式。当图片加载完成后，会将 `.placeholder` 替换为实际的图片。如果图片加载失败，则会继续显示占位符。

vue-cropper 图片预览

Vue Cropper 是一个基于 Vue.js 的图片裁剪组件，可以实现图片的预览功能。以下是一个简单的示例代码：

1. 首先，安装 vue-cropper 包：

npm install vue-cropper

2. 在你的 Vue 组件中引入 vue-cropper：

import VueCropper from 'vue-cropper'

export default {
  components: {
    VueCropper
  },
  data() {
    return {
      image: '',
      cropOptions: {
        aspectRatio: 16 / 9, // 裁剪框的宽高比
        autoCropArea: 0.6, // 默认裁剪框的大小占图片的比例
        movable: true, // 是否允许移动图片
        scalable: true, // 是否允许缩放图片
        zoomable: true, // 是否允许缩放图片
        rotatable: true, // 是否允许旋转图片
        viewMode: 1, // 显示裁剪框的模式，表示自由模式，1表示限制裁剪框在容器内
        guides: true, // 是否显示裁剪框虚线
        background: true, // 是否显示容器背景
        highlight: true, // 是否显示裁剪框周围的高亮区域
        autoCrop: true, // 是否默认生成截图框
        checkCrossOrigin: false, // 当检查到图片不符合跨域时，是否强制加载图片
      }
    }
  },
  methods: {
    onImageChange(e) {
      const file = e.target.files[0]
      const reader = new FileReader()

      reader.onload = (event) => {
        this.image = event.target.result
      }

      if (file) {
        reader.readAsDataURL(file)
      }
    },
    onCrop() {
      // 裁剪后的回调函数
      // 可以在这里处理裁剪后的图片
      console.log('裁剪完成')
    }
  }
}

3. 在模板中使用 vue-cropper 组件：

<template>
  <div>
    <input type="file" @change="onImageChange">
    <vue-cropper
      v-model="image"
      :options="cropOptions"
      @crop="onCrop"
    ></vue-cropper>
  </div>
</template>

通过上述代码，你可以实现在页面上选择图片后，预览并进行裁剪。注意，在示例代码中，需要使用 `v-model` 指令来双向绑定图片地址到 `image` 数据属性上。同时，`@crop` 事件会在裁剪完成后触发，你可以在回调函数中处理裁剪后的图片。

希望以上解答能够帮助到你！如果还有其他问题，请随时提问。