Assets
Imagem, CSS e JS usam os helpers de app/engine/core/helpers.php. No React o import é @mucrm/asset. A página não monta /public nem lê app.url.
Arquivo em public/ é src('images/logo.png') ou src('platform/items/0-0.gif'). O mesmo caminho que o PHP já aceita. O nome do banner e da logo fica no layout do tema.
Como importar
@mucrm/asset entrega src(), theme_src() e os outros helpers de arquivo.route() já vem da entrada da Engine, sem import. O layout escolhe o arquivo. O tema default faz assim:
import { Link } from '@inertiajs/react'
import { src, theme_src } from '@mucrm/asset'
const banner = theme_src('images/banner.jpg')
const logo = src('images/logo.png')
export default function Shell({ children }) {
return (
<header style={{ backgroundImage: banner ? `url('${banner}')` : undefined }}>
{logo ? <img src={logo} alt="" /> : null}
<Link href={route('home')}>Início</Link>
{children}
</header>
)
}Quem não usa banner.jpg ou logo.png troca o caminho nessa linha, ou escreve a URL direto: const logo = 'https://cdn.exemplo/marca.png'. A Engine não fixa esses nomes.route('home') monta o link a partir do nome da rota PHP. A página de Rotas mostra parâmetros e formulário.
src()
import { src } from '@mucrm/asset'
export default function Banner({ slide }) {
return <img src={src(`platform/sliders/${slide.image}`)} alt="" />
}src() e asset() são o mesmo helper: URL de um arquivo dentro de public/. Slider, avatar, item, ticket e driver passam o caminho relativo. A base fica no arquivo de cache da Engine, o mesmo das rotas, e não entra no JSON da página.
Os outros helpers do core seguem o contrato de Helpers de URL e Assets.
import { asset, resource, theme_src, theme_asset, plugin_src } from '@mucrm/asset'
asset('images/logo.png')
resource('images/logo.png')
theme_src('css/style.css')
theme_asset('images/banner.jpg')
plugin_src('shop', 'js/shop.js')O que cada um aponta
| Helper | Pasta |
|---|---|
src(path) / asset(path) | public/ |
resource(path) | public/assets/ |
theme_src(path) / theme_asset(path) | themes/{tema}/assets/ |
plugin_src(plugin, path) | app/modules/{plugin}/views/assets/ |
Atalho no tema
avatar() e item_image() não entram no React. São helpers de fora da Engine. Quem quiser esse atalho cria na lib do tema e chama src() por baixo. O tema default faz isso em themes/default/react/lib/list.js:
import { src } from '@mucrm/asset'
export function portrait(file) {
return src(file ? `platform/avatar/${file}` : 'platform/avatar/no-avatar.png')
}
export function itemImage(file) {
return src(file ? `platform/items/${file}` : 'platform/items/no-photo.png')
}Apagar essa lib não perde o caminho de public/. src('platform/avatar/foto.webp') continua valendo, porque a função mora em app/engine/inertia/asset.js.
O HTML carrega o cache antes do React e define window.__MUCRM_MEDIA, as bases de src() e theme_src(). app/engine/inertia/app.jsx lê isso antes de renderizar, em todo tema. Navegar pela SPA não baixa essas bases de novo. O arquivo em si continua escolhido no layout.