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/

// 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

environment:
  CONTENT_SECURITY_POLICY_DIRECTIVES__IMG_SRC: "self data: blob: https://tzrtech.org https://*.tzrtech.org"

3. CORS en 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

1.9 KiB Raw Blame History