Carregamento de imagens em projetos single page em Vue.js
Em qualquer aplicação web sempre existe a necessidade de adicionar uma imagem, ícone ou algum recurso estático necessário.
Última atualização em: | 11327 Visualizações
Quando você precisar carregar imagens ou recursos estáticos em uma aplicação single page com vue.js
basta fazer o seguinte procedimento de maneira simples e prática.
Criar pasta static no projeto
O primeiro passo é criar a pasta static
dentro do seu projeto, esta pasta será responsável por conter todas as imagens, ícones ou recursos estáticos que forem adicionados. A criação desta pasta também é importante para manter uma organização no seu projeto.
seu-app/static
Criado a pasta agora basta adicionar e utilizar os recursos. Suponhamos que queira utilizar a imagem foto-perfil.png
você deve copiar para dentro da pasta static
e após poderá utilizar em seu html
chamando da seguinte forma:
<img src="/static/foto-perfil.png">
Como fazer para colocar em produção
Para enviar para produção basta copiar a pasta para dentro da raiz do projeto e pronto.
Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.