如何在 Vue.js 开发环境中使用相对路径 [英] How to use relative paths in Vue.js dev environment

问题描述

我在 laravel/vue.js 项目的开发和生产环境中遇到路径问题.

在 CSS 文件中:

开发环境npm run hot只接受/public/images/image.png等url中的绝对路径，而生产环境npm run prod> + php artisan serve 只接受相对路径，如 ../images/image.png.

当我尝试在 vue 中使用 relative path 时，图像未显示在浏览器中，控制台显示:

GET http://localhost:63342/images/image.png?ffda917d2a7141d8413f313bccf119c5 404(未找到)

在 vue 模板中:

为了能够在生产中使用内联图像，我不得不将路径包裹在require().default中:

require() 虽然在开发环境中似乎不起作用.当我 npm run hot 图像不显示.

浏览器控制台显示:

GET http://localhost:63342/images/image.png?ffda917d2a7141d8413f313bccf119c5 404(未找到)

规格:

Windows 10Laravel:8.55.0Vue.js:4.5.13

从@Chandan 的评论中，我发现 <img src="images/image.png"> 适用于两种环境，如果 images 文件夹位于 <代码>公共.

不幸的是，如果您想将图像作为 background，这不适用于 url("images/image.png").有什么见解吗?

编辑 2:

最终我的问题没有好的解决方案.所以我停止使用 npm run hot 而是将 npm run watch 链接到 php artisan serve.现在我只使用带有 hot reload 的生产服务器.您可以在此处查看设置方法.

解决方案

在图像控制器中，您可以像这样上传图像或将其保存在存储文件夹中:

$extension = $request->image->extension();$request->image->storeAs("location","name of image".".".$extension);$imageName = Storage::url("location//图像名称").".".$extension);Post::create([//或图像或用于存储图像的模型'图像路径' =>$图像名称，]);

然后通过运行创建一个符号链接

php artisan storage:link

然后你可以做这样的路线:

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

和这样的控制器:

class ImageController 扩展控制器{公共功能展示($slug){//如果您愿意，您甚至可以在这里进行检查！$pathToFile = storage_path("location\\".$slug);返回响应()-> 文件($pathToFile)；}}

最后在 PHP 中

或者在JS中

const src = window.location.origin + image_path;

如果路径设置正确，控制器应该返回图像！

但这是如果你想实现一个 private 文件夹并希望确保用户在访问图像之前必须登录！但是如果你的文件夹是 public 你应该可以做

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.

解决方案

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 + ')' }"
    />

这篇关于如何在 Vue.js 开发环境中使用相对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！