Add Directus external images configuration documentation
This commit is contained in:
59
docs/DIRECTUS-EXTERNAL-IMAGES.md
Normal file
59
docs/DIRECTUS-EXTERNAL-IMAGES.md
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
# Configuracion de Imagenes Externas en Directus HST
|
||||||
|
|
||||||
|
## Problema
|
||||||
|
Las imagenes almacenadas en URLs externas (tzrtech.org) no se visualizaban en Directus debido a Content Security Policy (CSP).
|
||||||
|
|
||||||
|
## Solucion Implementada
|
||||||
|
|
||||||
|
### 1. Extension Display External-Image
|
||||||
|
Ubicacion: `/opt/hst/directus/extensions/directus-extension-external-image/`
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// dist/index.js - Renderiza URLs como imagenes
|
||||||
|
import{defineComponent as d,h as c}from"vue";
|
||||||
|
var a=d({props:{value:{type:String,default:null}},render(){return this.value?c("img",{src:this.value,style:"max-height:40px;max-width:100px;object-fit:contain;border-radius:4px",loading:"lazy"}):c("span",{style:"color:#ccc"},"—")}});
|
||||||
|
export default{id:"external-image",name:"External Image",icon:"image",component:a,options:[],types:["string","text"]};
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. CSP en Docker Compose
|
||||||
|
```yaml
|
||||||
|
environment:
|
||||||
|
CONTENT_SECURITY_POLICY_DIRECTIVES__IMG_SRC: "self data: blob: https://tzrtech.org https://*.tzrtech.org"
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. CORS en Nginx
|
||||||
|
```nginx
|
||||||
|
location ~* \.(png|jpg|jpeg|gif|webp|svg|ico)$ {
|
||||||
|
add_header Access-Control-Allow-Origin * always;
|
||||||
|
add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
|
||||||
|
try_files $uri =404;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. Estructura de URLs
|
||||||
|
|
||||||
|
| Campo | URL Pattern |
|
||||||
|
|-------|-------------|
|
||||||
|
| img_url | https://tzrtech.org/{table}/{mrf}.png |
|
||||||
|
| img_thumb_url | https://tzrtech.org/{table}/thumb/{mrf}.png |
|
||||||
|
|
||||||
|
## Campos Configurados
|
||||||
|
|
||||||
|
| Tabla | Campos |
|
||||||
|
|-------|--------|
|
||||||
|
| hst | img_url, img_thumb_url |
|
||||||
|
| flg | img_url, img_thumb_url |
|
||||||
|
| ply | img_thumb_url |
|
||||||
|
| itm | img_thumb_url |
|
||||||
|
| loc | img_thumb_url |
|
||||||
|
|
||||||
|
## Archivos Relevantes
|
||||||
|
|
||||||
|
- Extension: `/opt/hst/directus/extensions/directus-extension-external-image/`
|
||||||
|
- Docker Compose: `/opt/hst/docker-compose.yml`
|
||||||
|
- Nginx config: `/etc/nginx/sites-available/tzrtech.org`
|
||||||
|
|
||||||
|
## Notas
|
||||||
|
- La extension debe estar en la carpeta `extensions/` de Directus
|
||||||
|
- Reiniciar Directus despues de modificar la extension
|
||||||
|
- El CSP permite imagenes de tzrtech.org y subdominios
|
||||||
Reference in New Issue
Block a user