时间戳

首页 > 解决方案 > 如何从 vue 函数将图像设置为 vue-picture-input

vue.js - 如何从 vue 函数将图像设置为 vue-picture-input

问题描述

在 vue 中，我们可以使用 vue 函数设置输入字段的值v-model。例如：

<form id="demo">
  <!-- text -->
  <p>
    <input type="text" v-model="msg">
    {{msg}}
  </p>
</form>

new Vue({
  el: '#demo',
  data: {
    msg      : 'hi!'
  }
})

然后，我们将hi!在输入字段中有值。但是，我们如何在vue-picture-input中做同样的事情呢？它没有v-model。在更新模型之前，我需要vue-picture-input先将图像设置为预览图像。我尝试添加prefill，但更新模型后，控制台中显示错误：net::ERR_EMPTY_RESPONSE.

标签： vue.jsvuejs2vue-component

解决方案

vue-picture-input有一个名为 prefill 的道具。您可以使用预填充来加载预加载图像。尽管在这里使用v-model，您需要将prefill道具与imageURL. 看看下面的演示。

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-picture-input"></script>
  <title>In the browser!</title>
</head>

<body>
  <div id="app">
    <p>{{ message }}</p>
    <picture-input width="200" 
  height="200" :prefill="imgURL"></picture-input>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!',
        imgURL: "https://picsum.photos/200/200",
      },
      components: {
        'picture-input': PictureInput
      }
    })
  </script>
</body>

</html>

推荐阅读