Nuxt•2y ago

Display Images

So trying to load an image but getting 404, the image is stored in static/images/

 

 {
        name: 'Dashboard',
        icon: '/images/bar-chart-2.png',
        subItems: [
            {
                name: 'Overview',
                link: '/dashboard/overview'
            },
            {
                name: 'Analytics',
                link: '/dashboard/analytics'
            },
            {
                name: 'Reports',
                link: '/dashboard/reports'
            }
        ]
    },

 

 {
        name: 'Dashboard',
        icon: '/images/bar-chart-2.png',
        subItems: [
            {
                name: 'Overview',
                link: '/dashboard/overview'
            },
            {
                name: 'Analytics',
                link: '/dashboard/analytics'
            },
            {
                name: 'Reports',
                link: '/dashboard/reports'
            }
        ]
    },

19 Replies

Unknown User•2y ago

Message Not Public

Romi•2y ago

ah , must have read something outdated.. Thanks 🙂 before I close this, is it possible to style the stroke of an svg when inside of an img?

Unknown User•2y ago

Message Not Public

Romi•2y ago

so for a navigation where all the items have icons would I separate all the icons to its each component , then import it to my icon data ?

Unknown User•2y ago

Message Not Public

Romi•2y ago

ahok like your way better xD. so where do I store the svgs if I just need to pass the name?

Unknown User•2y ago

Message Not Public

Romi•2y ago

ah I got that thanks found this article (https://jessarcher.com/articles/creating-an-icon-component-in-vue/) But then can I put it with my const?

 
const navItems = [
    {
        name: 'Dashboard',
        icon: '???',
        subItems: [
            {
                name: 'Overview',
                link: '/dashboard/overview'
            },
            {
                name: 'Analytics',
                link: '/dashboard/analytics'
            },
            {
                name: 'Reports',
                link: '/dashboard/reports'
            }
        ]
    },

 
const navItems = [
    {
        name: 'Dashboard',
        icon: '???',
        subItems: [
            {
                name: 'Overview',
                link: '/dashboard/overview'
            },
            {
                name: 'Analytics',
                link: '/dashboard/analytics'
            },
            {
                name: 'Reports',
                link: '/dashboard/reports'
            }
        ]
    },

how can i add

 <BaseIcon name="bar" />

 <BaseIcon name="bar" />

to it?

Creating an SVG Icon Component in Vue - Jess Archer

There are a few different approaches to creating an icon component in Vue

Unknown User•2y ago

Message Not Public

Romi•2y ago

that would be great

Unknown User•2y ago

Message Not Public

Romi•2y ago

thats great thanks! the only question sorry is where is this name defined as the file is called "BaseBreifCase.vue"

 icon: 'icon-base-briefcase'

 icon: 'icon-base-briefcase'

Unknown User•2y ago

Message Not Public

Romi•2y ago

ok that makes sense thanks. I did follow what you shared but the icon itself does not render

Unknown User•2y ago

Message Not Public

Gaming

Programming

Display Images