jquery - 在 Linux 网络系统上存档时如何在 ReactJs 中显示图像？[ReactJs/GraphQl]

Question

我正在使用 ReactJs 和 GraphQl 将 FORMS 系统转换为 Web，碰巧在要转换的屏幕之一中必须显示/插入图像，问题是正在显示的图像位于网络 Linux 服务器和路径上不返回任何东西。*项目文件夹位于不同的服务器和 Windows 上。

我试图依赖另一个代码，该代码来自不再参与项目的开发人员，用于从该 Linux 服务器 JasperUtil.java 获取报告：

/***
     * Returns path relative to sub-directory within the network files / systems folder.
     *
     * @param parametersMap
     * @param subDir
     * @param relativeFile
     * @return Relative path or null if not a path within the files subdirectory hierarchy/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;
    }
}

如何在 Linux 网络系统上存档的 ReactJs 中显示图像？我对这种情况一无所知，我在互联网上搜索了几种方法，但找不到类似的东西。在其他在项目中查找图像/附件的屏幕中，我们使用以下方式：

后端，示例 processo-exemlo-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{codigos}),
              andInList("projudane.proexe_codigo", $P{projudCodigos}),
              $P{tipo}.mapNonAbsent("and proexeane.tipo = $$P{tipo}").orElse("")
          )
    query: |
      select proexeane.codigo,
             proexeane.caminho_arquivo nome,
             proexeane.proexe_codigo "proexeCodigo"
        from processo_exemplo_anexo proexeane
        where 1 = 1
              $P!{where}
    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

前端

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={index} 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={insertAnexos}
            >
                Adicionar Imagem
            </UploadButton>
        </React.Fragment>
    );
});

标签： jqueryreactjslinuxservergraphql