Baixando imagens via JavaScript utilizando Fetch API [Corte Raiz]

Fetch API é bem poderosa e não serve apenas para requisições onde pegamos JSON, ela também trabalha com streams de dados e você pode trabalhar com outros tipos de arquivo com ela.

Nesse corte eu demonstro como podemos baixar uma imagem no front via JavaScript Fetch API e renderizar no HTML criando uma URL temporária para o blob.
-
𝗘𝘀𝘀𝗲 é 𝘂𝗺 𝗰𝗼𝗿𝘁𝗲 𝗳𝗲𝗶𝘁𝗼 𝗻𝗮 𝗹𝗶𝘃𝗲 𝗿𝗮𝗶𝘇 #15 (𝗵𝗼𝗷𝗲 𝗱𝗶𝘀𝗽𝗼𝗻í𝘃𝗲𝗹 𝗮𝗽𝗲𝗻𝗮𝘀 𝗻𝗼 𝗷𝘀𝗿𝗮𝗶𝘇.𝗰𝗼𝗺) 🔥

🟡 𝗠𝗘𝗨 𝗖𝗨𝗥𝗦𝗢 𝗗𝗘𝗦𝗘𝗡𝗩𝗢𝗟𝗩𝗜𝗠𝗘𝗡𝗧𝗢 𝗪𝗘𝗕 𝗝𝗔𝗩𝗔𝗦𝗖𝗥𝗜𝗣𝗧 𝗥𝗔𝗜𝗭 🔥
🟠 𝗠𝗘 𝗜𝗡𝗗𝗜𝗤𝗨𝗘 𝗡𝗢 𝗚𝗜𝗧𝗛𝗨𝗕 𝗦𝗧𝗔𝗥
Coloque o meu usuário GitHub @ayrtonteshima e comente sobre meus conteúdos aqui no canal
🔵 𝗖𝗔𝗡𝗔𝗟 𝗧𝗘𝗟𝗘𝗚𝗥𝗔𝗠 𝗖𝗢𝗠 𝗠𝗔𝗧𝗘𝗥𝗜𝗔𝗟 𝗘𝗫𝗖𝗟𝗨𝗦𝗜𝗩𝗢
🟢 𝗜𝗡𝗦𝗧𝗔𝗚𝗥𝗔𝗠
🟢 𝗧𝗪I𝗧𝗧𝗘𝗥

[lucaohs]

É conteúdo de qualidade, vc é incrível.

[ProgramadorABordo]

🟠 𝗠𝗘 𝗜𝗡𝗗𝗜𝗤𝗨𝗘 𝗡𝗢 𝗚𝗜𝗧𝗛𝗨𝗕 𝗦𝗧𝗔𝗥
Coloque o meu usuário GitHub @ayrtonteshima e comente sobre meus conteúdos aqui no canal
🟡 𝐄𝐬𝐬𝐞 é 𝐮𝐦 𝐜𝐨𝐫𝐭𝐞 𝐝𝐞 𝐮𝐦𝐚 𝐝𝐚𝐬 𝐚𝐮𝐥𝐚𝐬 𝐚𝐨 𝐯𝐢𝐯𝐨 𝐪𝐮𝐞 𝐡𝐨𝐣𝐞 𝐞𝐬𝐭á 𝐝𝐢𝐬𝐩𝐨𝐧í𝐯𝐞𝐥 𝐬𝐨𝐦𝐞𝐧𝐭𝐞 𝐧𝐨 𝐣𝐬𝐫𝐚𝐢𝐳.𝐜𝐨𝐦 🔥
🔵 𝗖𝗔𝗡𝗔𝗟 𝗧𝗘𝗟𝗘𝗚𝗥𝗔𝗠 𝗖𝗢𝗠 𝗠𝗔𝗧𝗘𝗥𝗜𝗔𝗟 𝗘𝗫𝗖𝗟𝗨𝗦𝗜𝗩𝗢
🟢 𝗜𝗡𝗦𝗧𝗔𝗚𝗥𝗔𝗠
🟢 𝗧𝗪𝗜𝗧𝗧𝗘𝗥

[hoboldinho]

GG
Estava travado em como inserir uma imagem em uma página partindo de uma pasta diferente
Agora que estou entrando mais na área do front, mas já fiz varias outras aplicações only backend
Pelo que vi, o jeito vai ser criar uma rota só para imagem e usar o fetch junto com o blob pra renderizar ela
Estava tentando usar a TAG img padrão do HTML mas sem sucesso

[brunoalexandre]

Olá como vc fez o server para pegar a pasta 04-exemplo

[genuinobrasileiro]

Cara, legal o video, mas esses sites que vc buscou são de exemplo. Como faço isso, por exemplo, para buscar somente as manchetes de um jornal(g1 ou outro) ou entao buscar as fotos do mercado livre? Esse fetch faz isso?

[lucasdossantosgomes]

e como eu faço pra baixar a imagem na máquina?

[joeythai]

eu só consigo gerar essa imagem usando o blob() se fizer a chamada com fetch ? se eu fizer uma chamada ajax.({}) tem alguma função semelhante ?

[LuisFelipeRM]

Isso explica porque nunca consegui copiar uma url com blob e acessar depois.

[arozendojr]

Esse esquema é legal pois caso a imagem fosse ou contrato ou fórmula confidenciais em geral, poderia vir do banco de dados, sem estar exposto na internet, estou certo ?

[pedrofrias]

Sera q vc pode me ajudar?
Queria fazer uma pagina de cadastro onde a pessoa tenha q inserir una imagem e tera uma outra pagina q vai ter varios perfis cadastrados com imagens, tem como colocar mais de uma imagem no index? Se sim, como?

[ricardogava]

Rapaz, tava fazendo algo relacionado a isso que me deu uma dor de cabeça enorme, nem sabia que existia isso de blob, infelizmente acabei desistindo depois de ficar 2 dias inteiros tentando fazer um botão de download pra imagem do firebase, fiz de tudo que é jeito, acho que é alguma coisa relacionada a CORS mas eu li e li e não entendi nada, pesquisei bastante e não achei nada sobre o assunto, inclusive alguns tutoriais a pessoa simplesmente abria a url e já abria a janela de download mas aqui nada... quem sabe na próxima kk

[limaneto]

Qual extensão ele usa pra executar o js no vs?