Problems at viewing icons on the frontend with Vue3 | Laravel | Page 1

violet kestrel · 2023-04-06T04:18:02.577Z

I'm trying to view this icon: ```html ``` But the result is this:

violet kestrel Apr 6, 2023, 4:18 AM

#

I'm trying to view this icon:

    <img src="/home/pc/whistler/resources/bi/bootstrap.svg" alt="Bootstrap" width="32" height="32">

But the result is this:

#

Problems at viewing icons on the frontend with Vue3

#

I've tested the same code on a vanilla vue3 app, the icon appeared successfully,
Thus I concluded that this must be a problem related to laravel

dapper wolf Apr 6, 2023, 5:42 AM

#

What is this path? I'm 99% sure it's wrong

violet kestrel Apr 6, 2023, 6:11 AM

#

dapper wolf What is this path? I'm 99% sure it's wrong

it's the link of the img element, it can't be wrong

dapper wolf Apr 6, 2023, 6:11 AM

#

/home/pc what is this? it can't be right

violet kestrel Apr 6, 2023, 6:42 AM

#

dapper wolf `/home/pc` what is this? it can't be right

this is linux

dapper wolf Apr 6, 2023, 6:42 AM

#

so?

#

path needs to start from project root not your os

#

don't know you are using vue or inertia

#

imagine you deploy your app and on your server user won't be pc

#

then your path /home/pc automatically will be wrong

#

then what? you will change for every asset path? what if you 100+ files?

violet kestrel Apr 6, 2023, 6:45 AM

#

it didn't show the picture even when the absolute path was defined as a path

dapper wolf Apr 6, 2023, 6:46 AM

#

are you using plain vue or vue with inertia?

violet kestrel Apr 6, 2023, 6:46 AM

#

vue with inertia

dapper wolf Apr 6, 2023, 6:47 AM

#

okay, then where do you store your images?

violet kestrel Apr 6, 2023, 6:47 AM

#

at /home/pc/whistler/resources/bi

dapper wolf Apr 6, 2023, 6:47 AM

#

forget /home/pc

#

First read docs on the filesystem

#

especially this part https://laravel.com/docs/10.x/filesystem#the-public-disk

violet kestrel Apr 6, 2023, 7:03 AM

#

@dapper wolf I don't get it, how is this related to my problem?
I didn't even touch my php code yet and everything so far is on the frontend

dapper wolf Apr 6, 2023, 7:08 AM

#

check where you need to store files

#

so that you could access them via url

violet kestrel Apr 6, 2023, 7:13 AM

#

I don't want to access the pictures via the url, I just want to make them visible in as a content in the front page and make it work as a normal frontend app

dapper wolf Apr 6, 2023, 7:18 AM

#

it's the same as accessing them via url

#

so you need to put everything in the public directory

night dome Apr 6, 2023, 7:20 AM

#

You need to use a relative path, or use the alias. If you use the alias it would be something like @/bi/bootstrap.svg, then Vite will process the file and add it to your build automatically

dapper wolf Apr 6, 2023, 7:21 AM

#

but still the path wont be /home/pc/whatever...

#Problems at viewing icons on the frontend with Vue3