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

我正在用laravel和vue做水疗。我不知道在我进行更新/编辑功能时如何显示

新闻的特定图像。在laravel中，我知道如何使用
@foreach
和
资产
之类的工具来实现这一点。但是在vue组件中，我很难弄清楚它。我使用的是
vform
包，顺便说一句，这样我的表单会自动填充我想要编辑的数据，但我的问题是如何显示图像，就像我使用
vform
包中的
fill
函数填充文本字段一样。我需要做什么来解决我的问题


News.vue


编辑
新闻标题
字幕
新闻内容
图画
当前显示的新闻图像
关
提交更改

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>


导出默认值{
数据（）{
返回{
编辑模式：false，
新闻：{}，
表格：新表格({
id:“”，
标题：“，
副标题：“，
正文：“，
图像：“”，
发信人：“
})
}
},
方法：{
loadNews（）{
axios.get（'api/news'）
.然后（（{data}）=>（this.news=data））
},
createNews（）{
//console.log（'hello'）
这是。$Progress.start（）
此.form.post（“api/新闻”）
.然后（（）=>{
$（“#添加新闻”）.modal（“隐藏”）
$（“.modal background”）.remove（）
swal.fire（“创建！”、“成功”）
火灾。$emit（“可更新”）；
})
这是。$Progress.finish（）
},
addImage（e）{
//console.log（e.target.files[0]）
var fileReader=newfilereader（）
fileReader.readAsDataURL（e.target.files[0]）
fileReader.onload=（e）=>{
this.form.image=e.target.result
}
//console.log（this.form）
},
编辑表单（新闻数据）{
//显示编辑模式并填充其中的数据。
this.editmode=true
this.form.reset（）
$（'editNews'）.modal（'show'））
this.form.fill（新闻数据）
},
updateNews（）{
//根据模态输入更新新闻（不工作需要控制器@update方法中的少量代码）
this.form.put（'api/news/'+this.form.id）
.然后（（）=>{
$（'editNews'）.modal（'hide'））
$（“.modal background”）.remove（）
swal.fire（“更新！”、“成功”）
Fire.$emit（'UpdateTable'））
这是。$Progress.finish（）
})
},
},
创建（）{
console.log（'组件已安装'）
this.loadNews（）；
开火。$on（“可更新的”），（）=>{
this.loadNews（）；
})
}
}
为img添加以下内容：

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

它现在从目录sir读取图像，但它抛出了我和
GET错误http://127.0.0.1:8000/public/news/FATqHG9c7yr2DdNO.jpg 404（未找到）
您的图像是否位于“public/news/”文件夹中？如果它正在执行$（'#imagepreview'）.attr（'src'，“news/”+newsdata.image）；应该不行，先生。我的图像目录是
public/img/news
，我写了这段代码“$”（“#imagepreview”）.attr（'src'，“public/img/news/”+newsdata.image）`但仍然得到一个404错误，没有找到。删除公共文件，只需放上“img/news/”谢谢，先生。你的回答是对的。非常感谢：）
<img src="" id="imagepreview">

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