将图像源传递到 Vue.js 中的作用域插槽

Posted 2023-02-23

【中文标题】将图像源传递到 Vue.js 中的作用域插槽

【英文标题】：Passing an image source to a scoped slot in Vue.js

【发布时间】：2020-11-13 16:43:09

【问题描述】：

我迷路了，我已经阅读了有关插槽的文档并查看了一些示例，但我现在没有点击。

我不知道如何在插槽内将图像源传递给<img :src="">。

相关 Blade.Php 文件：

<image-upload>
    <template v-slot:completed-crop-preview >
        <div class="mb-2 flex space-x-2">
            <img :src="image" class="mb-2 w-16 h-16 rounded-full border-como border-2 border-dashed"
            >
        </div>
    </template>
</image-upload>

相关的 Vue.js 模板：

<div>
    <slot name="completed-crop-preview" v-bind:image="imagePreview">
    </slot>
</div>

根据我的开发人员工具，imagePreview 设置得很好，并且在我将预览移动到插槽之前它确实工作得很好。

【问题讨论】：

文件 Blade.php、Blade.php 或 blade.php（如果文件名的大小写很重要） )?它有标准名称吗？该文件的实际名称是什么？

刀片文件为edit.blade.php，vue文件为image-upload.vue。他们似乎合作得很好，因为除了 slot

imagePreview 是一个 url 还是一个对象？

imagePreview 是一个 url - 确切地说是 base64

【参考方案1】：

您可以通过以下方式接收插槽道具：

<image-upload>
    <template v-slot:completed-crop-preview="image" >
        <div class="mb-2 flex space-x-2">
            <img :src="image" class="mb-2 w-16 h-16 rounded-full border-como border-2 border-dashed"
            >
        </div>
    </template>
</image-upload>