Dúvida na hora de trabalhar com imagem.

Oi.

O final da seu pergunta ficou bem confuso e eu não entendi.

Para salvar uma imagem vc terá várias opções:

• Salvar ela em base64
• Salvar ela em um nuvem, tipo a AWS, e usar o endereço que ela disponibiliza.
• Salvar ele em uma pasta no seu dispositivo

Tem várias opções. Reformule a sua pergunte, pois eu não consegui entender.

1º Okay, seguinte eu estou testando num app o plugin da camera como foi apresentado durante o curso de Ionic, até o certo momento tudo tranquilo a imagem aparece lá e salva naquela img src, queria saber como enviar a foto para o back end. 2º O Back end ele salva a imagem da seguinte maneira você envia a foto ele salva numa pasta dentro da aplicação chamada "uploads/", as imagens ficam lá, porém quando salva é apenas o endereço onde foi salvo a imagem "uploads/buy.png", entretanto como já possuo o banco de dados alimentado não consigo trazer as informações para a app, o contexto apresentado acima o nome da coluna no banco é 'img' = 'uploads/buy.png' eu monto a consulta envio via json. Consulta via Json

[{"id":7,"img":"uploads\/buy.png","user_id":1,"latitude":-19.015601003551,"longitude":-57.657367813492,"categoria_id":2,"created_at":"2017-04-04 15:32:37","updated_at":"2017-04-04 15:32:37"},{"id":9,"img":"uploads\/post.jpg","user_id":1,"latitude":-18.99787960544,"longitude":-57.653087007904,"categoria_id":1,"created_at":"2017-04-14 10:06:58","updated_at":"2017-04-14 10:06:58"}]

Agora ficou mais claro. =D

1) Vc tem que enviar a imagem para o servidor usando um plugin de upload. Esse aqui é bom para fazer isso

https://github.com/apache/cordova-plugin-file-transfer

Aqui vc pode ver um tópico sobre o assunto de upload de arquivo/foto.

http://stackoverflow.com/questions/30101940/upload-image-to-server-angularjs

2) Do jeito que vc está recebendo o caminho da foto, realmente ele não vai conseguir exibi-la no Ionic. Do jeito que vc está apontando, o Ionic vai procurar uma pasta chamada uploads na raiz do seu projeto e realmente não vai encontrar, pois a pasta está lá no servidor.

Se vc imagem já está lá no servidor, vc tem que pegar o caminho completo da imagem, tipo assim:

"img":"http://www.meuservidor.com.br\/uploads\/buy.png"

Assim vc consegue exibi-lá na tag IMG do HTML.

Essa duvida que vc tem é mais relacionada a questão WEB do que do Ionic, mas como o Ionic é bem baseado no web vc está com essa dúvida.

Espero ter ajudado.

Mais é possível ler imagem via json do banco de dados?

É sim, Yuri.

Como eu falei, vc pode passar a URL completa da imagem ou até passar a imagem em base64 via JSON.

Tem um exemplo de como fazer isso?

Yuri, eu não tenho mas tenta procurar sobre como vc pode converter uma imagem para base64 no seu servidor e como fazer a conversão tbm no ionic.

Ou então só pegar a URL completa do servidor(acredito ser a opção mais correta)

Var dump antes de para o app, estou enviando via json

array:3 [▼
  0 => {#192 ▼
    +"id": 7
    +"foto": "http://10.0.0.103:8080/uploads/buy.png"
    +"user_id": 1
    +"latitude": -19.015601003551
    +"longitude": -57.657367813492
    +"categoria_id": 2
    +"created_at": "2017-04-04 15:32:37"
    +"updated_at": "2017-04-04 15:32:37"
  }
  1 => {#193 ▼
    +"id": 9
    +"foto": "http://10.0.0.103:8080/uploads/post.jpg"
    +"user_id": 1
    +"latitude": -18.99787960544
    +"longitude": -57.653087007904
    +"categoria_id": 1
    +"created_at": "2017-04-14 10:06:58"
    +"updated_at": "2017-04-14 10:06:58"
  }
  2 => {#194 ▼
    +"id": 13
    +"foto": "http://10.0.0.103:8080/uploads/WhatsApp Image 2017-03-07 at 13.52.09.jpeg"
    +"user_id": 1
    +"latitude": -19.024293637764
    +"longitude": -57.663236486816
    +"categoria_id": 3
    +"created_at": "2017-04-24 20:03:20"
    +"updated_at": "2017-04-24 20:03:20"
  }
]

Quando coloco o campo "foto" na consulta ela não consegue passar o objeto para tela de visualização sem o campo foto o objeto vai tranquilo, estou tentando enviar a foto. Tentei usar isso

<img data-ng-src="{{'data:image/png;base64,'+denunciasEscolhidas.foto}}" class="photo" width="100" height="100">

Porém nada.

Eu passo o objeto como era passado no projeto do AluraCar ele redireciona para tela de login, se eu tiro o campo da foto o objeto passa normalmente.

O caminho da URL está completa, blza. É só apontar ela para sua tag IMG sem a necessidade de transformar ela para base64.

A sua aplicação vai consegui enxergar esse endereço aí?

http://10.0.0.103:8080/uploads/post.jpg

Pq esse endereço é de uma rede local, certo? Se o Ionic consegui enxergar, blza. Vai funcionar na hora de desenvolvimento, mas em produção pode dar problema pois a rede vai ser outra. Daí seria a outra de colocar esse backend em um servidor, tipo AWS, e trocar o caminho no JSON.

Quando preencho a lista via JSON ele enxerga porém quando mando para uma tela de detalhes ou visualização para carregar a foto ele não deixa passa o json.

É só o campo foto que não quer passar. Se eu tiro ele o objeto passa.

Tentei seguir esses passos aqui máximo consegui chegar foi que no caminho foto

https://github.com/apache/cordova-plugin-file-transfer

essa informação depois que a foto ficar no formulário

file:///storage/emulated/0/Android/data/com.ionicframework.pickles464175/cache/1493312494806.jpg

Var dump no backend como tem que ir a foto

array:7 [▼
  "user_id" => "1"
  "descricao" => "asdasd"
  "latitude" => "-19.007090504778628"
  "longitude" => "-57.651391851806636"
  "categoria_id" => "2"
  "foto" => UploadedFile {#27 ▼
    -test: false
    -originalName: "hqdefault.jpg"
    -mimeType: "image/jpeg"
    -size: 7718
    -error: 0
  }
]

Seria possível que na hora que enviasse a imagem para o backend ele pegasse e caminho e tratasse a imagem?

file:///storage/emulated/0/Android/data/com.ionicframework.pickles464175/cache/1494729100797.jpg

OBS: é o caminho que me retorna quando mando a foto.