Question

我目前正在使用VueJS构建图片上传组件。输入元素从视图中隐藏，以便在其上叠加空图像标记。当用户单击图像时，将出现上载文件提示，并允许用户选择文件。但是，如果页面加载并且访问它的配置文件已经具有配置文件图像，则该组件应该加载该图像并显示它。该轮廓图像叠加在输入标签的顶部，以便当用户选择更新图像时，发生与上述相同的事情。

使用Vueify，我有以下内容：

<template>
    <div class="image-upload-container">
    <div class="container__image-container">
        <form method="POST"
              id="photo_upload"
              enctype="multipart/form-data"
        >

            <input type="file" />

            <img src="  "/>
        </form>
    </div>
    <slot></slot>
</div>
</template>

<script type="text/babel">
    export default {
        props: ['type'],

        data() {
            return{
                show: true
            }
        }
    }
</script>

我初始化组件：

import ImageUpload from '../components/ImageUpload.vue';

new Vue({
    el: '#image-upload',

    components: { ImageUpload },
});

然后将其加载到页面上：

<div id="image-upload">
    <image-upload></image-upload>
</div>

我的问题围绕如何加载来自服务器的图像路径。我使用的是Laravel和Blade。我是否应该这样做：

<div id="image-upload">
    <image-upload path={{ $profile->image }}></image-upload>
</div>

然后有一个名为路径的道具，用于初始化模板中的 img 标记？

图片上传组件

0 个答案: