Solucionado
Fala professor! Sobre o VueJS, a minha dúvida é a seguinte, toda vez que eu criar um array para usar no v-for, as imagens eu preciso joga-las na pasta static, fora da src? Ou existe alguma outra forma?
Prq eu fiz primeiro o projetinho aqui sem o laço, ai as imagens carregaram beleza, depois q eu joguei no laço, não carregaram mais.
Bom dia Fabiano! As imagens podem estar em qualquer lugar, o importante é que o endereço esta correto na hora de montar o v-for.
Agora, se você quer gravar as imagens fisicamente no seu projeto, eu ensino isso na parte 2, na parte dicas e truques.
https://cursos.alura.com.br/course/vue-parte2/task/24768
Mas você já parece saber desse truque, certo?
Então, precisa dar uma conferida de como você esta montando as URL's das imagens que estão lá. Cole seu código para que possamos ver. Quanto mais detalhado melhor.
Bom dia professor, segue o código. O caminho da imagem tá correto, mas não consigo entender prq não carrega as imagens.
<template>
<div class="container">
<h3>Uma tecnologia que vai fazer a <span>sua empresa crescer</span></h3>
<div v-for="servico of servicos" class="col-md-3">
<div class="painel">
<router-link to="/sistema">
<div class="head">
<slot>
<img :src="servico.url" :alt="servico.titulo">
</slot>
</div>
</router-link>
<div class="content">
<h4>{{ servico.titulo }}</h4>
<div class="resumo">{{ servico.resumo }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return{
servicos:[
{ url: '../../assets/servicos/loja-varejo.png', titulo: 'Loja Varejo', resumo: 'Controle total de todas as vendas/oss realizadas e processadas para serem recebidas no controle de caixa'},
{ url: '../../assets/servicos/padaria.png', titulo: 'Padarias', resumo: 'Controle total de todas as vendas/oss realizadas e processadas para serem recebidas no controle de caixa'},
{ url: '../../assets/servicos/supermercado.png', titulo: 'Supermercados', resumo: 'Controle total de todas as vendas/oss realizadas e processadas para serem recebidas no controle de caixa'},
{ url: '../../assets/servicos/restaurante.png', titulo: 'Bares & Restaurantes', resumo: 'Controle total de todas as vendas/oss realizadas e processadas para serem recebidas no controle de caixa'}
]
}
}
}
</script>Já experimentou usar como url /static/endereco-ou-pasta-da-sua-imagem? Se dentro de static você tem a pasta assets, então fica /static/assets/servicoes/restaurante.png.
Dá uma conferida. Agora, só para você saber. Em SPA, não armazenamos imagens junto com a aplicação, apesar de podermos fazer isso. Geralmente armazenamos a imagem em algum serviço na web tipo Amazon S3 e usamos o link de lá.
Então, a pasta assests está dentro de SRC e a static fora, são pastas diferentes, a minha dúvida é exatamente essa, se as imagens devem ficar dentro ou fora da pasta SRC. Esse projeto q estou fazendo será usado uma api trazendo as imagens, mas enquanto fica pronto, eu já queria ir usando as imagens de forma manual, se é que assim posso dizer, entende?
Devem ficar dentro de static. Dá uma conferida na parte que eu te passei, do curso 2.
Beleza professor, obrigado!
Só para deixar claro, o que fica dentro do assets é processado pelo processo de build do Vue CLI. Os js e css são adicionados no bundle da aplicação. Imagens não entram nessa ciranda, por isso ficam dentro da pasta static.