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.

Wolmir Cezer Garbin por Wolmir Cezer Garbin - - Vue.js - TUTORIAL

Ú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.


Publique seu post no Receitas de Código

Aguarde, estamos trabalhando para que você possa publicar sua postagem no Receitas de Código!