如何在vue js组件中显示laravel公用文件夹图像?

时间:2019-09-22 08:34:00

标签: javascript laravel vue.js carousel

我已将图像存储在公用文件夹中,这是代码

if (isset($image))
    {
        $currentDate = Carbon::now()->toDateString();
        $imagename = $slug .'-'. $currentDate .'-'. uniqid() .'.'. $image->getClientOriginalExtension();
        if (!file_exists('uploads/slider'))
        {
            mkdir('uploads/slider', 0777 , true);
        }
        $image->move('uploads/slider',$imagename);
    }else {
        $imagename = 'dafault.png';
    }
    $slider = new Slider();
    $slider->image = $imagename;

现在我需要在vue js组件中显示这些图像。在这里我发送带有响应的图像

$sliders = Slider::all();

    return response([
       'error' => false,
       'data' => $sliders
    ]);

将vue-carousel用于带有这些图像的滑块

axios
    .get("http://food.test/api/slider", '')
    .then(response => {
        if (response.data) {
            this.images = response.data.data;
        }
        console.log(this.images);
    })
    .catch(error => {
        loader.hide();
    });

并尝试使用

进行显示
<carousel :perPage="1">
      <slide v-for="(image, index) in images">
          <img :src="'images/'+image.image" alt="">
      </slide>
  </carousel>

No images sh

没有图像显示。如何显示图像?

0 个答案:

没有答案