Como exibir as imagens em ReactJs cujo a mesma esta arquivada em um sistema de rede Linux? [ReactJs/GraphQl]

React

Java

10/08/2021

Estou convertendo um sistema FORMS para web, utilizando ReactJs e GraphQl, ocorre que em uma das telas a ser convertida deve exibir/inserir imagens, o problema é que as imagens que estão sendo exibidas localizadas em um servidor Linux da rede e o caminho não está retornando nada.
**A pasta do projeto está localizada em um servidor diferente e do Windows.*

Tentei me basear em outro código, de um desenvolvedor que não está mais no projeto, que é utilizado para buscar relatórios nesse servidor Linux, JasperUtil.java :

    
/***
    	 * Retorna caminho relativo a sub-diretório dentro da pasta arquivos / sistemas da rede.
    	 *
    	 * @param parametersMap
    	 * @param subDir
    	 * @param relativeFile
    	 * @return Caminho relativo ou null caso não seja um caminho dentro da hierarquia do sub-diretório arquivos/subDir.
    	 */
    	public static File getArquivo(Map<String, Object> parametersMap, String subDir, String relativeFile)
    	{
    		if (relativeFile == null)
    			return null;

    		File dir = new File((String) parametersMap.get("ARQUIVOS_DIR"), subDir);
    		File file = new File(dir, relativeFile.replace('\', '/'));

    		if (!FileUtil.isSubPath(dir, file))
    			throw new RuntimeException(String.format("Arquivo %s não é filho de %s.", file, dir));

    		return file;
    	}
    }


Como exibir as imagens em ReactJs cujo a mesma esta arquivada em um sistema de rede Linux?
Estou no escuro com essa situação, busquei na internet várias formas mas não encontrei nada parecido.
Em outras telas que buscam imagens/anexos dentro do projeto, utilizamos da seguinte forma:

Back-end, exemplo processo-exemplo-anexo.yml

    types:
      ProcessoExemploAnexo:
        parameters:
          - name: codigos
            type: Integer[]
            batchField: codigo
          - name: proexeCodigos
            type: Integer[]
            batchField: proexeCodigo
          - name: tipo
            type: String
          - name: where
            type: String
            expression: |
              concatSql(
                  andInList("projudane.codigo", $P),
                  andInList("projudane.proexe_codigo", $P),
                  $P.mapNonAbsent("and proexeane.tipo = $$P").orElse("")
              )
        query: |
          select proexeane.codigo,
                 proexeane.caminho_arquivo nome,
                 proexeane.proexe_codigo "proexeCodigo"
            from processo_exemplo_anexo proexeane
            where 1 = 1
                  $P!
        queryFields:
          codigo:
            type: Integer
          nome:
            type: String
          proxeCodigo:
            type: Integer
            internal: true

    inputTypes:
      ProcessoExemploAnexoInput:
        fields:
          codigo:
            type: Integer
          nome:
            type: String
          fileUpload:
            type: FileUpload

      FileUpload:
        javaType: mm.api.model.sis.FileUpload
        fields:
          id:
            type: String
          contentType:
            type: String
          fileSize:
            type: Long
          submittedFileName:
            type: String


Front-end
    interface AnexosProps {
    	model: RecordType;
    }

    const Anexos = namedObserver('Anexos', (props: AnexosProps) => {
    	const deleteAnexo = action((index: number) => {
    		const anexo = props.model.processosExemplosAnexos[index];

    		if (anexo.codigo) {
    			if (!props.model.anexosDelete)
    				props.model.anexosDelete = [];

    			props.model.anexosDelete.push(anexo.codigo)
    		}

    		props.model.processosExemplosAnexos.splice(index, 1);
    	});

    	const insertAnexos = action((fileList: FileList) => {
    		Array.from(fileList).forEach(file => props.model.processosExemplosAnexos.push({
    			codigo: null,
    			nome: file.name,
    			fileUpload: file
    		}));
    	});

    	return (
    		<React.Fragment>
    			{props.model.processosExemplosAnexos.map((anexo: typeof props.model.processosExemplosAnexos[number], index) =>
    				<p key= style={{ lineHeight: '1.5em' }}>
    					<a href={anexo.url}>{anexo.nome}</a>

    					{props.model.status == 'P' &&
    						<span
    							className='fa fa-trash-alt'
    							style={{ cursor: 'pointer', marginLeft: '0.7em' }}
    							title='Excluir'
    							onClick={() => deleteAnexo(index)}
    						/>
    					}
    				</p>
    			)}
    			<br />

    			<UploadButton
    				style={props.model.processosExemplosAnexos?.length > 0 ? { marginTop: '1em' } : undefined}
    				disabled={props.model.status != 'P' }
    				multiple
    				onSelected=
    			>
    				Adicionar Imagem
    			</UploadButton>
    		</React.Fragment>
    	);
    });


Busco exemplos para seguir.
Sadjskabncm S\c

Sadjskabncm S\c

Curtidas 0
POSTAR