vue 保存图片是显示文字，页面上不显示

可能是因为你没有设置正确的图片路径或者图片格式不正确，导致无法正常显示图片。你可以检查一下以下几个方面：

1. 确认图片路径是否正确。可以在浏览器中打开图片路径查看是否能正常加载图片。

2. 确认图片格式是否正确。常见的图片格式有jpg、png、gif等，如果图片格式不正确，也会导致无法正常显示图片。

3. 确认代码中是否正确设置了img标签的src属性，例如：

   <img src="image.jpg" alt="图片">

在这段代码中，src属性的值应该是图片的正确路径。

希望这些提示能够帮助你找到问题并解决。

相关问题

vue 设置保存图片时显示文字，再页面上不显示文字

如果你想要在页面上显示文字，而不是图片，可以使用`<span>`标签或者其他的文本标签，将文字内容包含起来，例如：

<span>这是一段文字</span>

如果你想要在保存图片时将文字内容作为图片保存，可以使用一些库来实现，例如`html-to-image`，它可以将HTML元素（包括文字）转换为图片。在Vue项目中使用该库，可以按照以下步骤进行：

1. 安装`html-to-image`库：

   npm install html-to-image --save

2. 在Vue组件中引入该库：

   import htmlToImage from 'html-to-image';

3. 在需要保存为图片的元素上添加`ref`属性，例如：

   <div ref="myElement">
       <span>这是一段文字</span>
   </div>

4. 在需要保存为图片的事件处理函数中，调用`htmlToImage`库来将元素转换为图片：

   saveImage() {
       htmlToImage.toPng(this.$refs.myElement)
           .then(function (dataUrl) {
               // 将dataUrl保存为图片
           });
   }

在这段代码中，`htmlToImage.toPng`方法将`$refs.myElement`转换为PNG格式的图片，并返回一个`dataUrl`字符串，你可以将该字符串作为图片保存。

希望这些提示能够帮助你解决问题。

vue如何实现在页面上画画_Vue使用Canvas绘制图片、矩形、线条、文字，下载图片...

Vue 中可以使用 HTML5 的 Canvas API 来实现在页面上画画，可以通过在 Vue 组件中添加 canvas 元素，并在 mounted 钩子函数中获取其 2D 上下文来实现。

以下是一个实现在页面上画画的示例代码：

<template>
  <div>
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
  </div>
</template>

<script>
export default {
  name: 'DrawCanvas',
  data() {
    return {
      isDrawing: false,
      lastX: 0,
      lastY: 0,
      ctx: null,
    }
  },
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d');
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true;
      this.lastX = e.offsetX;
      this.lastY = e.offsetY;
    },
    draw(e) {
      if (!this.isDrawing) return;
      this.ctx.beginPath();
      this.ctx.moveTo(this.lastX, this.lastY);
      this.ctx.lineTo(e.offsetX, e.offsetY);
      this.ctx.stroke();
      this.lastX = e.offsetX;
      this.lastY = e.offsetY;
    },
    stopDrawing() {
      this.isDrawing = false;
    },
  },
}
</script>

<style scoped>
canvas {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}
</style>

上面的代码中，我们在组件中添加了一个 canvas 元素，并为其添加了三个事件监听器，分别是 @mousedown、@mousemove 和 @mouseup，用于开始、绘制和停止绘制画画。

在 mounted 钩子函数中，我们获取了 canvas 元素的 2D 上下文，并将其保存在组件的 this.ctx 属性中。

在组件的 methods 中，我们定义了三个方法，分别是 startDrawing、draw 和 stopDrawing。

startDrawing 方法用于在鼠标按下时记录当前鼠标的位置，并将 isDrawing 属性设置为 true。

draw 方法用于在鼠标移动时绘制线条，如果 isDrawing 为 true，则使用 moveTo 和 lineTo 方法绘制一条线段，并将 lastX 和 lastY 属性更新为当前鼠标的位置。

stopDrawing 方法用于在鼠标松开时将 isDrawing 属性设置为 false，停止绘制画画。

最后，我们在组件的 template 中使用 ref 属性来获取 canvas 元素，并为其添加样式。