He intentado cargar una imagen por ruta que contiene caracteres especiales como &@^.
Cuando cargué la imagen como se muestra a continuación, no funcionó.
<img src="file:///test/@#$%/0.png"/> Entonces, traté de usar encodeURI (ruta), encodeURIComponent (ruta), pero tampoco funcionó.
¿Cómo puedo hacer esto?
Tienes que codificar cada nivel en tu ruta (sáltate los / caracteres):
const path = 'file:///test/@#$%/0.png' const encodedPath = 'file://' + path.replace('file://', '').split('/').map((p) => encodeURIComponent(p)).join('/') console.log(encodedPath) // Output: file:///test/%40%23%24%25/0.png Use la salida anterior para su etiqueta img , se cargará.