Static Assets vs. Dynamic Routing Collision

In this tutorial, we are going to learn the mechanism of how the Nuxt Niro server processes the request, why the assets routing collision occurs, and how to prevent it.

Let's consider, suppose that we do have the static image inside the folder:

project-root/
│
├── public/
│   ├── images/
│   │   ├── csbyte.png

Also, we do have the Nuxt dynamic page routing as below:

project-root/
│
├── app/
│   ├── pages/
│   │   ├── blog/
│   │   │   ├── [alias].vue

If we try to server-side render (SSR) the logo, then the Nuxt SSR might throw errors like this.

bash

ERROR  [request error] [fatal] [GET] http://localhost:3000/blog/csbyte.png

This results in the static assets vs dynamic routing collision.

When using image src as src="images/csbyte.png" the browser treats it as a relative path.

When loading a blog post at http://localhost:3000/blog/some-post, the browser takes the current URL path (/blog/) and appends your relative image string to it. This turns the request into:

http://localhost:3000/blog/images/csbyte.png

As we do have a dynamic route /blog/[alias].vue and try loading the image via SSR, the request error.

How to fix it? Let's add a leading slash / in the image source.

html

<img src="/images/csbyte.png" />

This will point to the root domain and look inside the image folder. Once adding slash Nitro will catch the request in the static assets layer public/images/csbyte.png and serve the image.