Laravel 如何使用Vue Js从服务器检索图像？

我需要在vue js和laravel中从服务器检索图像，这是我的代码

控制器

公共功能索引（）
{
$posts=Post:：all（）；
return response（）->json（[“posts”=>$posts]）；
}

路由器

Route:：get（'test'，'MasterController@index');

数据库

Schema:：create（'posts'，函数（Blueprint$table）{
$table->bigIncrements（'id'）；
$table->string（'image'）；
$table->timestamps（）；
});

Vue

data:function（）{
返回{
图像：“”，
员额：[]，
};
},
showImage（）{
axios
.get（“测试”）
.然后（功能（响应）{
$test=this.posts=response.data.posts；
console.log（$test）；}）
.catch（函数（错误）{
console.log（错误）；
});
}

预期图像输出

---

查看您发布的代码，

showImage（）

方法不在Vue实例的

methods

对象中。尝试将该方法放入

methods

对象中，看看这是否有区别

data:function（）{
返回{
图像：“”，
员额：[]，
};
},
方法：{
showImage（）{
获取（“测试”）。然后（函数（响应）{
$test=this.posts=response.data.posts；
console.log（$test）；
}).catch（函数（错误）{
console.log（错误）；
});
}
}

那么，您现在期望什么？你的帖子里甚至没有问题。我改成了问题。你试过运行代码吗？如果是这样的话，它会起作用吗？如果不是的话，它会起作用吗？是否有任何错误消息等？为了让我们提供帮助，您需要向我们提供更多信息。我只是运行了代码，但这不起作用，因此我需要您的帮助来检查我的代码哪里出错哪里调用了

showImage（）

？此外，您应该能够在索引方法中传递

$posts

像

->json（$posts）

。但正如@geogehanson所指出的，您已经在这里列出了代码，但您没有说明实际问题是什么？我将该方法包装在vue实例中

<img v-for="post in posts" :key="post.image" v-bind:scr="post.image">