Image in Json without using Base 64

Question

Hello

I’m creating a json and in each json information I need to put an image but I didn’t want a giant code so I don’t want to use Base64 there is some way to put a link in the json that leads to an image?

The image in json will pass a javascript filter so I don’t know if I can put the image url in the img tag.

[
    {
        "titulo": "Texto titulo",
        "localizacao": "Texto localização",
        "texto": "Texto grande de exemplo para usar como teste geral",
        "imagem": "",
        "id": 0
    }
]

Editing

[    
    {
        "titulo": "Teste 1",
        "imagem": "imagens/Exemplo.png",
        "id": 0
    },

    {
        "titulo": "Teste 2",
        "imagem": "imagens/sardinha11.png",
        "id": 1
    }
]

<img class="imageminfo" id="imagemareas" src="imagens/Exemplo.png">

I put it that way and then my script has a function and at the end of it I use this form to edit the image:

var image: obj.imagem;

$("#imagemareas").text(this.image);

The script is not complete because there are different scripts of this genre that I don’t think and need to present or the question would get too big.

Answer

With the help of some answers I managed to realize my solution:

[    
    {
        "titulo": "1",
        "imagem": "./imagens/Exemplo.png",
        "id": 0

    },

    {
        "titulo": "2",
        "imagem": "./imagens/sardinha11.png",
        "id": 1
    }
]

var image: obj.imagem;

$("#imagemareas").attr("src", this.image);

<img class="imageminfo" id="imagemareas" src="">

Answer 1

Suppose your file that will display the image is anywhere, either remote or localhost, and suppose inside the file directory you have a subdirectory called "images".

The structure of Json will be:

[
 {
        "titulo": "Texto titulo",
        "localizacao": "Texto localização",
        "texto": "Texto grande de exemplo para usar como teste geral",
        "imagem": "imagens/arquivo.jpg",
        "id": 0
  }
]

If you call src="" in the tag with the path name, the tag will display the related image, whether it is on localhost or on the web, if the file structure and directories are the same, you will have no problem in displaying the images in your code, as it will keep the file path pattern as images/file.jpg.

On localhost will be:

<img src="imagens/arquivo.jpg"/>

And on the online server:

<img src="imagens/arquivo.jpg"/>

And both locations will display the images in the same way.