html img 隐藏 破图,HTML img图片无法显示或出错，用另一张图片替换

要隐藏破图或替换无法显示的图片，可以使用以下两种方法：

1. CSS 隐藏破图

可以使用 CSS 的 `background-image` 属性来隐藏破图，如下所示：

<div style="background-image: url('placeholder.png');"></div>

这样，即使图片无法显示或出错，也可以显示一个占位符图片。如果图片可以正常显示，则会覆盖占位符图片。

2. JavaScript 替换无法显示的图片

可以使用 JavaScript 来替换无法显示的图片，如下所示：

<img src="image.png" onerror="this.onerror=null; this.src='placeholder.png';">

当图片加载失败时，会触发 `onerror` 事件，并执行 JavaScript 代码来替换图片。这里使用了 `null` 来避免无限循环，即当占位符图片也加载失败时，不再执行 `onerror` 事件。

相关问题

vue 图片404 替换默认图

在Vue中，可以使用`v-bind`指令来绑定图片的属性值。如果图片无法加载（即返回404错误），可以通过在`<img>`标签中添加`v-on:error`事件来处理。

首先，你需要在data中定义一个默认图片的路径，用于替换无法加载的图片。例如：`defaultImage: '默认图片路径'`。

然后，在模板中，使用`v-bind:src`指令将图片的路径绑定到一个data中的变量上，同时在`<img>`标签上添加`v-on:error`事件监听。

示例代码如下：

<template>
  <div>
    <img v-bind:src="imagePath" v-on:error="handleImageError" alt="图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imagePath: '图片路径',
      defaultImage: '默认图片路径'
    }
  },
  methods: {
    handleImageError() {
      this.imagePath = this.defaultImage;
    }
  }
}
</script>

在上述示例中，当`<img>`标签中的`src`属性所指定的图片无法加载时，会触发`handleImageError`方法。该方法会将`imagePath`变量更新为`defaultImage`，从而显示默认图片。

这样，在图片加载出错的情况下，就能够替换为默认图片。

Ueditor中如何使用setContent（） 不改变html里的图片路径

在使用 `setContent` 方法设置 HTML 内容时，Ueditor 提供了一个 `filterTxt` 方法，可以过滤掉 HTML 内容中的一些不需要的属性或元素，从而保留图片等资源文件的相对路径。

使用 `filterTxt` 方法的具体步骤如下：

1. 获取需要设置的 HTML 内容。

   var content = "<p>这是一段包含图片的 HTML 内容</p><img src='img/pic.jpg'>";

2. 在设置 HTML 内容之前，调用 `filterTxt` 方法对 HTML 内容进行过滤。

   content = editor.getOpt('filterTxt')(content);

3. 使用 `setContent` 方法设置过滤后的 HTML 内容。

   editor.setContent(content);

4. 在保存 HTML 内容时，如果需要将相对路径转换为绝对路径，可以使用 `getContent` 方法获取 HTML 内容，然后使用正则表达式替换相对路径。

   var content = editor.getContent();
   content = content.replace(/src=['"]([^'"]+)['"]/g, function(match, p1) {
     var absoluteUrl = new URL(p1, window.location.href).href;
     return 'src="' + absoluteUrl + '"';
   });

这样做的效果是过滤掉 HTML 内容中的一些不需要的属性或元素，并保留图片等资源文件的相对路径。在保存 HTML 内容时，可以将相对路径转换为绝对路径，从而避免图片等资源文件路径出错的问题。