Level 80
@liano_isaac You need to pass URLs to your front-end, not paths.
1 like
Dec 18, 2023
4
Level 1
Show images in vue
Hey guys. I'm using laravel on the backend and vue on the front and they both communicate via api. I have the following instruction:
public function project($slug){
$project = Project::where('slug', $slug)->with('service', 'photos')->first();
return response()->json($project);
}.
The correct data is displayed in the browser console, however, the $project variable has an array of photos. I would like to know how to display these photos in my vue application, I have already tried the following way:
<div class="carousel-inner" v-if="project && project.photos && project.photos.length">
<div class="carousel-item active" v-for="photo in project.photos" :key="photo.index">
<img :src="photo.photo" alt="" />
</div>
</div>
but it doesn't work, in the browser console it shows the right path of the respective images in the array but displays an error (404 (Not Found))
Level 47
open vue-devtools to see what is photo like and also , would mind show some vue codes?
Level 1
<template>
<section class="project-bg" :style="{ background: background }">
<div
:class="{ 'banner-color': true }"
:style="{ backgroundColor: backgroundpage }"
>
<div class="content container-sec">
<div class="banner-content">
<h2 class="generico-h2 titulo" v-if="project && project.bannerTitulo">
{{ project.bannerTitulo }}
</h2>
<div class="imagem" v-if="project && project.bannerfoto">
<img :src="project.bannerfoto" alt="" />
</div>
</div>
</div>
</div>
<div class="conteudo">
<div class="container-sec mb-80">
<div class="max-width">
<div class="descricao">
<h3 class="generico-h2" v-if="project && project.nome">
{{ project.nome }}
</h3>
<p class="paragraph" v-if="project && project.descricaoResumo">
{{ project.descricaoResumo }}
</p>
</div>
<div class="data">
<div>
<span>Industria</span>
<p v-if="project && project.industria">{{ project.industria }}</p>
</div>
<div>
<span>Ano</span>
<p v-if="project && project.ano">{{ project.ano }}</p>
</div>
</div>
<span class="linha"></span>
<div class="data servicos">
<div>
<span>Serviços</span>
<p v-if="project && project.service.titulo">
{{ project.service.titulo }}
</p>
</div>
</div>
<span class="linha"></span>
<div class="desaresultado grid-2">
<div>
<h3>O Desafio</h3>
<p class="paragraph" v-if="project && project.desafio">
{{ project.desafio }}
</p>
</div>
<div>
<h3>O Resultado</h3>
<p class="paragraph" v-if="project && project.resultado">
{{ project.resultado }}
</p>
</div>
</div>
</div>
</div>
<div class="cor-preta-primaria cortipografia">
<div class="container-sec">
<div class="max-width">
<span class="semi-titulo">IDENTIDADE VISUAL</span>
<h3 v-if="project && project.corTitulo">
{{ project.corTitulo }}
</h3>
<div class="cortipografia-content grid-2">
<div class="tipogra">
<img
v-if="project && project.fotocor"
:src="project.fotocor"
alt=""
/>
<p class="paragraph" v-if="project && project.descricaoCor">
{{ project.descricaoCor }}
</p>
</div>
<div class="cor">
<img
v-if="project && project.fototipografia"
:src="project.fototipografia"
alt=""
/>
<p
class="paragraph"
v-if="project && project.descricaoTipografia"
>
{{ project.descricaoTipografia }}
</p>
</div>
</div>
</div>
</div>
</div>
<div class="galeria">
<div class="galeria-content container-sec">
<h3>A Galeria</h3>
<p
class="paragraph max-width"
v-if="project && project.descricaoGaleria"
>
{{ project.descricaoGaleria }}
</p>
</div>
</div>
<!-- <router-link to="#">Visite a página</router-link> -->
<div class="midea container">
<div
id="carouselExampleFade"
class="carousel slide carousel-fade"
data-bs-ride="carousel"
>
<div class="carousel-inner">
<div
class="carousel-item active"
v-for="photo in project.photos"
:key="photo.index"
>
<img :src="photo.photo" alt="" />
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleFade"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleFade"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</section>
</template>
<script>
import { api } from "@/services.js";
export default {
name: "ProjectInfo",
props: ["id"],
data() {
return {
background: "white",
project: null,
backgroundpage: "",
};
},
methods: {
getProject() {
api.get(`/projecto/${this.id}`).then((response) => {
console.log(response.data);
this.project = response.data;
this.backgroundpage = response.data.hexadecimal;
});
},
},
created() {
this.getProject();
},
};
~~~
Level 47
what is photo.photo like? Is it a url or just a filename? Open vue dev-tools to inspect it.
Please or to participate in this conversation.