Итак, у меня есть компонент vue в файле лезвия (я использую laravel), компонент отображает все изображения с v-для использования данных, которые извлекаются с помощью ax ios, а второй отображает только один изображение с данными, которые передаются через опору. У меня проблема в том, что sr c в v-img (я также использую vuetify) работает в первом компоненте, но не работает во втором, хотя ссылки одинаковы, и оба компонента вызываются в файле лезвия, расположенном в та же папка. вот код: файл лезвия показа всех изображений:
@extends('layouts.app')
@section('content')
<div id="app">
<show-images></show-images>
</div>
@endsection
Файл изображения шоу vue:
<template>
<div class="container">
<v-layout row wrap>
<v-flex
xs12 sm6 md4 lg3
v-for="image in images" :key="image.id"
>
<a :href="'images/' + image.id">
<v-card
shaped
hover
class="text-center mx-3 my-3">
<v-responsive class="pt-4">
<v-img
lazy-src="https://via.placeholder.com/300?text=Something+Went+Wrong"
aspect-ratio="1"
src="blue-hole.jpg"
></v-img>
</v-responsive>
<v-card-text>
<div class="subheading">{{image.title}}</div>
</v-card-text>
</v-card>
</a>
</v-flex>
</v-layout>
<div class="text-center">
<v-pagination
v-model="pagination.current"
:length="pagination.total"
@input="onPageChange"
color="white"
dark
></v-pagination>
</div>
</div>
</template>
<script>
export default {
data(){
return{
images:[],
pagination: {
current: 1,
total: 0
}
}
},
methods: {
getImages(){
axios.get('api/getImages?page=' + this.pagination.current)
.then(response => {
this.images = response.data.data;
this.pagination.current = response.data.current_page;
this.pagination.total = response.data.last_page;
});
},
onPageChange(){
this.getImages();
window.scrollTo(0,0);
},
showImage(id){
console.log(id)
axios.get('api/showimage/' + id)
}
},
mounted(){
this.getImages();
console.log('sup')
}
}
</script>
Файл лезвия показа одного изображения:
@extends('layouts.app')
@section('content')
<div id="app">
<show-image :image = '@json($image)'></show-image>
</div>
@endsection
и вот файл show-image vue:
<template>
<div>
<h1 class="subheading gre--text">test</h1>
<div class="container">
<div class="row" style="height:100%;border:2px solid blue">
<div class="col-sm-5" style="border:2px solid red">
<v-card flat class="text-center mx-2 my-2">
<v-responsive class="pt-4">
<v-img
lazy-src="https://via.placeholder.com/300?text=Something+Went+Wrong"
aspect-ratio="1"
src="blue-hole.jpg"
></v-img>
</v-responsive>
<v-card-text>
<!-- <div class="subheading"> {{image.title}} </div> -->
<div class="grey--text"> {{image.file_name}} </div>
</v-card-text>
<v-card-actions>
<v-btn color="grey">
<v-icon left small>mdi-download-outline</v-icon>
<span>Download</span>
</v-btn>
</v-card-actions>
</v-card>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props : [
'image'
],
data(){
return{
}
},
}
</script>
Я даже пытался использовать тег img, думал, что это ошибка vuetify, но проблема остается. Пожалуйста помоги. Спасибо ! ps: blue-hole.jpg находится в папке publi c