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

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

Curtir t�pico + 0

Responder