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

Última atualização em: | 2184 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.


Wolmir Cezer Garbin

Wolmir Cezer Garbin

Sou Arquiteto de Software e fundador do Receitas de Código, amo minha profissão e com o Receitas de Código quero compartilhar um pouco deste conhecimento.

Ver mais sobre o autor

FIQUE POR DENTRO

Receba as novidades todo mês em seu e-mail!

Apoiadores


Publique seu post no Receitas de Código

Agora você pode publicar seu post no Receitas de Código e compartilhar seu conhecimento com muitas pessoas!

Quero publicar