diff --git a/docs/DIRECTUS-EXTERNAL-IMAGES.md b/docs/DIRECTUS-EXTERNAL-IMAGES.md new file mode 100644 index 0000000..05a4b55 --- /dev/null +++ b/docs/DIRECTUS-EXTERNAL-IMAGES.md @@ -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