Question

如何使用VueJs在视图中呈现javascript图像对象。我在下面添加了一个示例代码。但是“v-html”标签没有渲染图像。

<div id="test">
  <span v-html="imageTemp"></span>
</div>


<script>
    new Vue({
        el: "#test",

        data: {
            imageTemp: new Image()
        },

        mounted: function() {
            this.imageTemp.src = "/temp.png"
        }
    });
</script>

这样做的最佳方法是什么？

我知道如何使用“v-bind：src”渲染图像。

此外，使用jQuery可以使用以下方法将图像对象添加到视图中：$("#test").append(this.imageTemp);

我想知道是否有办法使用VueJs在视图上呈现javascript图像对象。

Answer 1

您可以尽可能简单地使用它。

 new Vue({
        el: "#test",
        
      data: {
	imageTemp: '<img src="/temp.png">'
	}
    });

<div id="test">
  <span v-html="imageTemp"></span>
</div>
<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>

Answer 2

您使用的Image对象用于在内存中创建图像，使用Canvas等操作它们。您可以通过将其附加到元素来使用它在页面上显示图像，但为什么要在程序上像这样构建页面？

如果要执行此操作，则需要将javascript图像附加到文档中的元素。在Vue中，当你想访问html元素时，给它们一个ref。所以......

<div id="test">
  <span ref="putImageHere"></span>
</div> 

<script>
    new Vue({
        el: "#test",
        mounted: function() {
            var img = new Image();
            img.src = "/temp.png"
            this.$refs.putImageHere.appendChild(img);
        }
    });
</script>

v-html是仅在您真正需要时才使用的标签之一。 v-html片段不是动态的。

Answer 3

为什么不使用img标签，然后让它的src attrubute成为动态设置的东西。这就是通常的方式。

但是，如果由于某种原因你必须让img标签本身是动态的，那么你只需要继续将img标签放在模板中，但只需使用'v-if'使其仅在需要时呈现

使用VueJs渲染javascript图像对象

3 个答案: