How to show images in Unity from Web Service?

Question

First, excuse me for my bad English. I'm trying to call some images that I have stored in a database with a text. I can show the text, but I do not know how to show the image. The images are saved in a folder called "upload" located in the Web Services files. The text called him through his ID, and I want the related image to be displayed as well.

This is how I called:

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using SimpleJSON;

public class DataLoader : MonoBehaviour
{
    string JsonDataString;
    string JsonDataString2;
    static public string OriginalJsonSite;

    public Text Titulo;
    public Text Texto;

    IEnumerator Start ()
    {
        WWW readingsite = new WWW (OriginalJsonSite);
        Debug.Log(OriginalJsonSite);
        yield return readingsite;


        if (string.IsNullOrEmpty (readingsite.error)) {
            JsonDataString = readingsite.text;
            JsonDataString2 = JsonDataString.Substring(3, JsonDataString.Length - 4);
        }


        JSONNode jsonNode = SimpleJSON.JSON.Parse (JsonDataString2);
        Debug.Log(JsonDataString2);

        Titulo.text = jsonNode["titulo"].ToString().ToUpper();
        Debug.Log(jsonNode["titulo"]);
        Texto.text = jsonNode["texto"].ToString().ToUpper();
        Debug.Log(jsonNode["texto"]);
    }}

And this is how I show:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class PlaceInfo : MonoBehaviour
{
    public string escenaInfo;
    public string id;

    void OnMouseOver()
    {
        DataLoader.OriginalJsonSite = "http://(Website name)/API/test.php?id=" + id;
        SceneManager.LoadScene(escenaInfo);
    }
    void OnMouseDown()
    {
        DataLoader.OriginalJsonSite = "http://(Website name)/API/test.php?id=" + id;
        // this object was clicked - do something
        SceneManager.LoadScene(escenaInfo);
    }}

This is one of the data I have saved.

[{"_id":{"$oid":"5d30f06ba6e0712cf41c93d3"},"titulo":"Museo Hist\u00f3rico y Arqueol\u00f3gico de Conc\u00f3n","texto":"Es el lugar que resguarda y cobija los elementos ancestrales, hist\u00f3ricos y tradicionales de la localidad y est\u00e1 interesado en recuperar la memoria, como elemento fundamental para la construcci\u00f3n de identidad que nos permita romper el aislamiento.","fileName":"museo.jpg"}]

and this is the url of the image:

http://(web service name)/upload/museo.jpg

How does the website serve its images? What does the API send on a response? There is not enough information in the question to give a complete answer. — Ruzihm, Jul 19 '19 at 22:00
This is one of the data I have saved. [{"_id":{"$oid":"5d30f06ba6e0712cf41c93d3"},"titulo":"Museo Hist\u00f3rico y Arqueol\u00f3gico de Conc\u00f3n","texto":"Es el lugar que resguarda y cobija los elementos ancestrales, hist\u00f3ricos y tradicionales de la localidad y est\u00e1 interesado en recuperar la memoria, como elemento fundamental para la construcci\u00f3n de identidad que nos permita romper el aislamiento.","fileName":"museo.jpg"}] and this is the url of the image: http://(web service name)/upload/museo.jpg — Eduardo Herrera, Jul 19 '19 at 22:08

Ruzihm · Accepted Answer · 2019-07-20T01:13:31.247

You already have the file name (jsonNode["fileName"]), so just get the file with UnityNetworking.UnityWebRequest.Get then convert it to a texture and display it:

using UnityEngine.Networking;

public RawImage displayTexture;

IEnumerator Start ()
{
    WWW readingsite = new WWW (OriginalJsonSite);
    Debug.Log(OriginalJsonSite);
    yield return readingsite;

    if (string.IsNullOrEmpty (readingsite.error)) {
        JsonDataString = readingsite.text;
        JsonDataString2 = JsonDataString.Substring(3, JsonDataString.Length - 4);
    }

    JSONNode jsonNode = SimpleJSON.JSON.Parse (JsonDataString2);
    Debug.Log(JsonDataString2);

    Titulo.text = jsonNode["titulo"].ToString().ToUpper();
    Debug.Log(jsonNode["titulo"]);
    Texto.text = jsonNode["texto"].ToString().ToUpper();
    Debug.Log(jsonNode["texto"]);

    string imageUrl = "http://(web service name)/upload/" + fileName;

    UnityWebRequest imageRequest = UnityWebRequest.Get(imageUrl);
    yield return imageRequest.SendWebRequest();

    if(imageRequest.isNetworkError || imageRequest.isHttpError) {
        Debug.Log(imageRequest.error);
    }
    else {
        byte[] imageBytes = imageRequest.downloadHandler.data;

        Texture2D tex = new Texture2D(2, 2);
        tex.LoadImage(imageBytes);
        displayTexture.texture = tex;
    }
}

Just make sure you assign a RawImage to displayTexture in the unity inspector, and add that RawImage to a Canvas that will display where you need it.

Hi, I have a question in the code you showed, "imageBytes" how does it work? When I add it to the code, it tells me that it does not exist in the current context. — Eduardo Herrera, Jul 20 '19 at 01:13
@EduardoHerrera Sorry about that. I meant the line to be `byte[] imageBytes = imageRequest.downloadHandler.data;`. That should fix it — Ruzihm, Jul 20 '19 at 01:14

How to show images in Unity from Web Service?

1 Answers1