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

你可以尝试在HTML的img标签中添加onerror属性，当加载图片出错时，会触发该属性指定的处理函数。例如，将图片替换为另一张图片可以这样实现：

<img src="图片地址" onerror="this.src='替换图片地址'">

其中，图片地址是原本应该显示的图片的URL，替换图片地址是你要替换成的图片的URL。当原本应该显示的图片加载出错时，就会自动替换为你指定的替换图片。

另外，你也可以在后端对图片URL进行判断，如果图片无法加载或出错，就返回替换图片的URL。这样可以避免前端出现破图的情况。

相关问题

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 内容时，可以将相对路径转换为绝对路径，从而避免图片等资源文件路径出错的问题。