How to use relative paths in Vue.js dev environment

Question

I am having trouble with paths in the development and production environments in a laravel/vue.js project.

In CSS files:

Development environment npm run hot only accepts absolute paths in urls like /public/images/image.png while the production environment npm run prod + php artisan serve only accepts relative paths like ../images/image.png.

When I try to use a relative path in vue the images are not shown in the browser and the console shows:

GET http://localhost:63342/images/image.png?ffda917d2a7141d8413f313bccf119c5 404 (Not Found)

In vue templates:

In order to being able to use inline images in production I had to wrap the path inside require().default:

<img :src="require('../images/image.png').default" class="emailIcon" alt="">

require() does not seem to work in the development environment though. When I npm run hot the images are not shown.

Browser console shows:

GET http://localhost:63342/images/image.png?ffda917d2a7141d8413f313bccf119c5 404 (Not Found)

specs:

Windows 10
Laravel: 8.55.0
Vue.js: 4.5.13

Edit:

From @Chandan's comment I found that <img src="images/image.png"> works for both environments IF the images folder is inside public.

Unfortunately this doesn't work for url("images/image.png") if you want to put an image as background. Any insight there?

Edit2:

In the end there was no good solution for my problem. So I stopped using npm run hot and instead linked npm run watch to php artisan serve. Now I'm only using production server with hot reload. You can see here how to set it up.

Your images should be in laravel public folder. Take a look [here](https://stackoverflow.com/questions/52576512/how-can-use-laravel-assets-in-vue-component) pls — Nikola Pavicevic, Aug 27 '21 at 12:03
@NikolaPavicevic I tried implementing that but it broke my project. Is there no way without writing new functions to "trick" the framework? — Artur Müller Romanov, Aug 27 '21 at 12:45
I just looked in one of my project. I put images in laravel public folder (not storage) and then in vue component `:src="images/'+imageName`" — Nikola Pavicevic, Aug 27 '21 at 13:00
@ArturMüllerRomanov check out this [post](https://stackoverflow.com/questions/47805549/display-images-with-vuejs-and-laravel). — Chandan, Sep 01 '21 at 04:17
@Chandan Thank you! Could you take a look at the **edit** section? — Artur Müller Romanov, Sep 01 '21 at 08:46
@ArturMüllerRomanov check [here](https://laravel.com/docs/8.x/mix#url-processing) — Chandan, Sep 01 '21 at 09:43

HashtagForgotName · Accepted Answer · 2021-09-01T13:20:34.327

In the image controller you can upload your image like this or save it in the storage folder:

$extension = $request->image->extension();
$request->image->storeAs("location","name of image".".".$extension);
$imageName = Storage::url("location//name of image").".".$extension);

Post::create([ // Or image or which model your using to store your images
    'image_path' => $imageName,
]);

and then create a symbolic link by run

php artisan storage:link

Then u can make a route like this:

Route::get('image/{slug}/',[App\Http\Controllers\ImageController::class, 'show'])->name('image.show');

And controller like this:

class ImageController extends Controller
{
    public function show($slug)
    {
        // U can even make checks here if u want!
        $pathToFile = storage_path("location\\".$slug);
        return response()->file($pathToFile);
    }
}

And finally in PHP

<img src="{{url($image_path)}}"/>

or in JS

const src = window.location.origin + image_path;

And if the paths are correctly set the controller should return the image!

But this is if u want to implement a private foldor and want to make sure that user has to be logged in before accessing a image! but if ur folder is public you should just be able to do

    <div
            :style="{ backgroundImage: 'url(' + data.image + ')' }"
    />

How to use relative paths in Vue.js dev environment

1 Answers1