在 vue 组件中执行编辑功能时如何显示数据库中的特定图像？

Question

我正在使用 laravel 和 vue 制作 SPA。我不知道如何在我制作 update/edit 函数时显示 news 的特定图像。在 laravel 中，我知道如何使用 @foreach 和 asset 之类的东西来做到这一点。但是在 vue 组件中我很难搞清楚。我正在使用 vform 包，这样我的表单就会自动填充我想要编辑的数据，但我的问题是如何显示图像，就像我使用 fill 填充文本字段一样vform 包中的函数。我需要做什么才能解决我的问题？

News.vue

             <!-- show/edit modal extra large -->
                <div class="modal fade" id="editNews" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                               <div class="modal-header">
                                  <h4> <strong>Edit</strong> </h4>
                               </div>
                               <div class="modal-body">
                                            <!-- Vform -->
                                  <form @submit.prevent="updateNews()">
                                    <div class="form-group">
                                    <label>News Title</label>
                                    <input
                                    v-model="form.title"
                                    type="text" name="title"
                                    placeholder="Title"
                                    class="form-control" :class="{ 'is-invalid': form.errors.has('title') }">
                                    <has-error :form="form" field="title"></has-error>
                                    </div>

                                    <div class="form-group">
                                    <label>Subtitle</label>
                                    <input
                                    v-model="form.subtitle"
                                    type="text"
                                    name="subtitle"
                                    placeholder="Subtitle"
                                    class="form-control" :class="{ 'is-invalid': form.errors.has('subtitle') }">
                                    <has-error :form="form" field="subtitle"></has-error>
                                    </div>

                                    <div class="form-group">
                                    <label>News Content</label>
                                    <textarea
                                    v-model="form.body"
                                    type="text"
                                    name="body"
                                    placeholder="News Content"
                                    class="form-control" :class="{ 'is-invalid': form.errors.has('body') }">
                                    </textarea>
                                    <has-error :form="form" field="body"></has-error>
                                    </div>


                                    <div class="form-group">
                                    <label>Picture</label>
                                    <input type="file" id="image" @change="addImage"
                                    class="form-control" :class="{ 'is-invalid': form.errors.has('image') }">
                                    <has-error :form="form" field="image"></has-error>
                                    </div>

                                     <div>
                                     <h4>Currently Displayed News Image</h4>

                                    </div>



                        <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Submit Changes</button>
                         </div>
                        </form>
                        <!-- vform -->
                               </div>
                            </div>
                        </div>
                </div>
                <!-- modal edit/show -->

下面的脚本News.vue

<script>
    export default {
        data(){
            return{
                editmode:false,
                news: {},
                form: new Form({
                    id:"",
                    title: "",
                    subtitle:"",
                    body:"",
                    image:"",
                    postedby:""
                })
            }
        },

        methods: {
            loadNews(){
                axios.get('api/news')
                    .then(({data}) => (this.news = data))
            },
            createNews(){
                //  console.log('hello')
                this.$Progress.start()
                this.form.post("api/news")
                    .then(()=>{
                         $("#addNews").modal("hide")
                         $(".modal-backdrop").remove()
                        swal.fire("Created!", "", "success")
                         Fire.$emit("UpdateTable");
                    })
                this.$Progress.finish()
            },
            addImage(e){
                // console.log(e.target.files[0])
                var fileReader = new FileReader()
                fileReader.readAsDataURL(e.target.files[0])
                fileReader.onload = (e) => {
                    this.form.image = e.target.result
                }
                // console.log(this.form)
            },
            editForm(newsdata){
             //shows the modal for edit and fills the data in it.

                this.editmode = true
                this.form.reset()
                $('#editNews').modal('show')
                this.form.fill(newsdata)
            },
            updateNews(){
            //update the news based on the modal inputs (not working need few codes in controller @update method)
                this.form.put('api/news/' + this.form.id)
                    .then(()=>{
                        $('#editNews').modal('hide')
                        $(".modal-backdrop").remove()
                        swal.fire("Updated!", "", "success")
                        Fire.$emit('UpdateTable')
                        this.$Progress.finish()
                    })
            },
        },

        created() {
            console.log('Component mounted.')
            this.loadNews();

            Fire.$on("UpdateTable",()=>{
                this.loadNews();
            })
        }
    }
</script>

Answer 1

为 img 添加这个：

<img src="" id="imagepreview">

那么你可以简单地做：

$('#imagepreview').attr('src', "IMAGEDIRECTORYHERE" + newsdata.image);