1

我正在使用 Tiptap 编辑器编写内容，然后通过v-html指令附加由它生成的数据。

我知道 v-html 可以处理具有绝对来源的图像，例如“https://something/file.jpg”，但我需要一个通过 Webpack 并在其名称中获取哈希的图像。并且要求图像似乎不适用于 v-html。有人解决了这样的问题吗？

upd 代码如下：

<div v-html="someData"></div>

someData 作为对异步请求的响应，它看起来像这样：

<p> kjfdkf </p> <p> kfdfk </p> <div> kdfjdkf </div>

这是文本编辑器的标准输出。为了不使用标签显示它，我将它传递给v-html. 问题是如何处理通过 webpack 的图像。我没有头绪。

4

2 回答 2

1

我不完全确定我是否正确理解了您的问题，但考虑到您有这样的 HTML 字符串：

<p> kjfdkf </p>
<img src="PATH" />
<p> kfdfk </p> 
<img src="PATH" /> 
<div> kdfjdkf </div>

...内部带有随机图像元素，您可能可以解析 HTML 以将图像元素的源更改为它们的原始数据，而不是当前的相对路径。

DOMParser似乎是解析 HTML 最简单的选项，因为您可以在一行中解析它：

let el = new DOMParser().parseFromString(this.html, "text/html");

然后只需找到所有图像元素：

let imgs = el.getElementsByTagName("img");

...将它们的来源更改为原始形式：

imgs.forEach((img) => (img.src = require(img.src)));

...选择正文el（因为那是您的 HTML 所在的位置）：

let body = el.body;

...并返回其innerHTML：

return body.innerHTML;

您可以将这一切包装在一个计算属性中：

computed: {
  processedHtml() {
    let el = new DOMParser().parseFromString(this.html, "text/html"),
      imgs = el.getElementsByTagName("img");
    imgs.forEach((img) => (img.src = require(img.src)));
    let body = el.body;
    return body.innerHTML;
  },
}

这是完整的代码：

<template>
  <div id="app">
    <div v-html="processedHtml"></div>
  </div>
</template>

<script>

export default {
  name: "App",
  data() {
    return {
      html: `<p> kjfdkf </p><img src="PATH" /> <p> kfdfk </p> <img src="PATH" /> <div> kdfjdkf </div>`,
    };
  },
  computed: {
    processedHtml() {
      let el = new DOMParser().parseFromString(this.html, "text/html"),
        imgs = el.getElementsByTagName("img");
      imgs.forEach((img) => (img.src = require(img.src)));
      let body = el.body;
      return body.innerHTML;
    },
  },
};
</script>

或者，如果您将图像移动到您的public目录，它们的名称将不会被 webpack 修改，因此您可以避免所有这些。

于 2021-03-17T21:27:25.010 回答
0

我不得不在 marsnebulasoup 的回答中添加一些内容

首先，当我们在 Tiptap 编辑器中保存图像源时，如果我输入 @/assets/img/someImg.jpg，它会保存为 'http://localhost:8080/@/assets/img/someImg.jpg'，这不是正是我想要的。所以我添加了一行来提取图像名称：

const src = img.src.slice(img.src.lastIndexOf('/') + 1);

第二个require不接受变量，所以我没能做到

imgs.forEach((img) => (img.src = require(img.src)));

我不得不这样做：

const imgSrc = require(`@/assets/img/${src}`);
img.src = imgSrc;
于 2021-03-22T17:25:08.790 回答