Как получить изображение с сервера, используя Vue Js?

Question

Мне нужно получить изображение с сервера в vue js и laravel, вот мой код.

Контроллер

public function index()
{
    $posts = Post::all();
    return response()->json(["posts" => $posts]);
}

Маршрутизатор

Route::get('test','MasterController@index');

База данных

Schema::create('posts', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->string('image');
    $table->timestamps();
});

Vue

        data: function() {
            return {
                image: "",
                posts: [],
            };
        },
     showImage() {
                axios
                    .get("test")
                    .then(function(response) {
                        $test = this.posts = response.data.posts;
                        console.log($test);})
                    .catch(function(error) {
                        console.log(error);
                    });
            }

Ожидаемый вывод изображения

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

Answer 1

Глядя на код, который вы разместили, метод showImage() находится вне объекта methods экземпляра Vue. Попробуйте поместить метод в объект methods и посмотрите, имеет ли это значение.

data: function() {
    return {
        image: "",
        posts: [],
    };
},
methods: {
    showImage() {
        axios.get("test").then(function(response) {
                $test = this.posts = response.data.posts;
                console.log($test);
            }).catch(function(error) {
                console.log(error);
            });
    }
}