skills.rest
harlemsilvas
harlemsilvasCOMMUNITY
Explore all skills by this author →
GitHub

Plano de Centralização de Caminhos de Imagens/Uploads

Centralizes image and upload URLs via a single configuration and URL builder.

Updated Mar 19, 2026
Search Tags:#frontend#backend#uploads#url-generation#image-paths
One-click install
npx skills add https://github.com/harlemsilvas/motopecas --skill plano-de-centraliza-o-de-caminhos-de-imagens-uploads
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Plano de Centralização de Caminhos de Imagens/Uploads
Source: https://github.com/harlemsilvas/motopecas/tree/main/docs
Command: npx skills add https://github.com/harlemsilvas/motopecas --skill plano-de-centraliza-o-de-caminhos-de-imagens-uploads

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralizes and normalizes image and upload URLs across frontend and backend deployments, reducing broken links and environment-specific differences.

Core Features & Use Cases

  • Central URL builder using a single configuration (VITE_UPLOADS_URL) that converts stored relative paths (e.g., /uploads/produtos/ID/arquivo.jpg) into absolute URLs.
  • Fallback image handling with a default placeholder when paths are missing.
  • Guidance for migrating existing code to a unified image URL strategy and ensuring Nginx serves the /motopecas/uploads path correctly.

Quick Start

Configure your frontend to use a centralized image/url provider and ensure the Nginx path /motopecas/uploads is correctly mapped, then validate in DEV and PROD.

Frequently Asked Questions about Plano de Centralização de Caminhos de Imagens/Uploads

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I centralize image upload URLs across frontend and backend environments?▼

To centralize image upload URLs, use a single configuration variable like VITE_UPLOADS_URL combined with a URL builder function. This converts stored relative paths into absolute URLs, ensuring consistency across DEV and PROD environments and reducing broken links.

What is the best way to handle missing image paths and display a fallback image?▼

Handle missing image paths by implementing fallback image logic within your URL builder. When a stored relative path is missing or invalid, the builder automatically returns a default placeholder image URL to maintain visual consistency.

How do I configure Nginx to serve user-generated media via subpaths?▼

Configure Nginx by correctly mapping the specific subpath, such as /motopecas/uploads, to your backend media directory. This ensures the web server properly routes and serves user-generated images requested by the frontend absolute URLs.

Does VITE_UPLOADS_URL work for normalizing relative upload paths in production?▼

Yes, VITE_UPLOADS_URL works for normalizing relative upload paths. It provides the base URL needed by your URL builder to transform stored relative paths like /uploads/... into absolute URLs for both development and production deployments.

Why do my image links break when migrating between DEV and PROD environments?▼

Image links break across DEV and PROD due to environment-specific URL differences. Migrating to a unified image URL strategy using a centralized configuration and a URL builder resolves this by constructing consistent absolute paths dynamically.

Related Skills

Explore More Software Engineering Skills→
datasurfacedatasurface

Configure pip for DataSurface

Configure pip to access the DataSurface PyPI registry persistently.

Official
Intermediate
RaNDoM6913RaNDoM6913
1

audit-frontend

Scan React/Vue/Svelte/Angular projects for hardcoded values, console statements, and dead imports.

Community
Advanced
applewaveapplewave
1

bkend-storage

Manage backend file storage with presigned uploads, metadata, and access control.

Community
Advanced
ovachieverovachiever
52

vercel-blob

Store and serve user-uploaded files via Vercel Blob in Next.js applications.

Community
Advanced