Resumo do Problema de Exibição de Imagem

Então, a razão porque a imagem não está aparecendo é, na verdade, devido ao UI aqui que a gente deu para esse componente. Então se lembra que a gente pegou os dados da API, quando a gente clicou em um dos itens da lista, a gente passou como props o content URL, dentro do content URL, a gente esperava que recebeu o local onde a imagem está na web, mas tem um problema aqui, na verdade tem dois problemas. Se a gente olhar o conteúdo desta variável aqui, nós vamos observar que é, na verdade, um URL de redirecionamento para outro link da imagem. Então, deixa eu voltar aqui, vou atualizar e vou dar outra busca, fazer outra busca aqui. Então, aqui tem um mesmo navegador, deixa eu só colocar aqui do lado. Então, quando eu clico em um deles, vocês se lembram que a gente fez um log do item que foi clicado. Então, a gente passou como props para essa nova cena o objeto que a gente quer, que tem os dados da imagem que a gente quer e apareça. Aí a gente esperou que essa content URL tenha um link para a imagem, vamos copiar esse link, vou abrir o nova tab e deixa eu remover essas quotes aqui. Se você observar, a gente, ele está, na verdade, redirecionando para outro link. Então, esse é o problema número um que a gente tem, não temos o link direto para a imagem, tá bom? Agora, o outro problema é, no meu caso, que eu estou usando o iOS, né, da Apple, ele tem uma restrição aqui para apps do iOS, o padrão é que não deixa você carregar imagens com o que não seja um HTTPS, tá bom? Isso é uma coisa do iOS, no Android vai funcionar legal, ainda se não fosse uma imagem sem HTTPS, mas no iOS não vai funcionar, então é o segundo problema meu aqui. Para ilustrar esse segundo problema, vamos ver essa outra imagem que eu tenho, que é da Wikimedia, que é do HTTPS. Eu vou copiar esse link só para você ver, e no lugar aqui no componente de imagem, na URI, no lugar de content, URL, eu vou passar, na verdade, essa URL direto, o link direto, com o HTTPS, ok? Vou salvar e vou fazer qualquer busca aqui. Note que vai ser sempre a mesma imagem para qualquer item que você clicar, vou clicar nesse é o gato, você notou que a imagem agora apareceu, não é? Eu botei diretamente o link e a HTTPS, então funciona. Nós sabemos que o jeito que a gente está adicionando a imagem, na verdade, está correto, então o problema não era com esse negócio, mas com a content URL aqui. Agora vou voltar isso aqui. Então como a gente vai resolver esse problema? Então, vou voltar aqui, vou copiar esse content URL que a gente usou, tá? Vou só copiar aqui. Deixa eu abrir o editor de texto aqui. Então, problema número 1 é que a content URL, na verdade, tem um link que redireciona para outro link da imagem. Esse é o problema número 1, e parece que o eact neire não aceita esse redirecionamento. E o problema número 2 é que, no caso meu do iOS, não vai carregar imagens que não sejam HTTPS, bom? Nem todas as imagens que vêm do Bing aqui são HTTPS. Por exemplo, essa aqui do gato branco, a gente viu que ele vai redirecionar para uma imagem que não é HTTPS, se não é privado. Mas tem outros, por exemplo, se eu tenho uma busca de novo, do gato, esse gato meditando aqui, eu cliquei, vou dar um console log, vamos voltar para a minha debugger, até o final o item foi clicado, né? Esse é o object, aqui a content URL, eu vou copiar e vou colar aqui, remove as quotes. Você nota que redireciona para uma imagem que tem HTTPS. Se você quiser saber como uma maneira de extrair o URL original desse content URL, eu vou fazer outro vídeo, mas você pode extrair o URL original daqui que tem aqui, na verdade está entre esses negócios aqui, você nota que esse é o URL original. A gente pode extrair e dar um decode, usando o decode URL component para recuperar o URL original, mas ainda tem o problema do HTTPS, porque nem todos são, né? Então, no meu caso, eu vou escolher outra opção para resolver esse problema que a gente tem, em vez de usar o content URL, eu vou usar a mesma coisa que a gente usou para o outro acena, o thumbnail URL, tá bom? Então, resolver isso, eu vou voltar aqui, então, em vez de pegar o content URL, eu vou botar em thumbnail, tá bom? Então, eu note que eu selecionei os dois ao mesmo tempo, eu apertei comando D, no meu caso, que eu uso Mac, no seu caso, pode ser o Ctrl D, se você usa o outro sistema, eu vou, eu uso o Atom como o texto editor, mas eu sei também que editores como Sublime também têm essa função, funcionalidade. Então, eu botei thumbnail URL aqui, vamos ver o que acontece agora. Carregando, clicar neste cara, tá aí, pareceu o thumbnail, né? E o botão de voltar ainda não está definido, né? Ah, se você notar, no meu caso, que eu estou com a iOS, sempre tem que ter o HTTPS, a imagem tem que ter, de um source que tem HTTPS, no meu caso, que você olhar na descrição aqui do objeto, na thumbnail, né? O URL é sempre HTTPS, porque tá do content clever network, um CDN do BIM, né? Se você copiar isso, colar, remover quotes, aí, HTTPS sempre. Então, é uma solução para o meu problema. Então, vamos lá continuar, vamos implementar o botão de voltar. Então, a gente já, para fazer o botão de voltar, é sempre muito simples, mas a primeira coisa que a gente tem que saber é como ir voltar para a cena anterior usando o navegador, né? Se você se lembra que para a gente vir para essa cena, a gente deu um push da cena anterior, na home. Cadê aqui? Tá home aqui. Se você ver aqui, a gente clica item, a gente deu um navegueiro push. A gente empilhou para o pilha do navegador, a stack, né? Nos caras agora a gente vai dar um pop para voltar. Então, vamos lá. Mas o problema aqui é que esse cena aqui, essa cena, não tem acesso ao navegador, porque? Vamos olhar no nosso index aqui para ver as rotas. Você note que o único componente que tem acesso ao navegador aqui é o home, né? Que a gente passou o navegador com as