如何在 Vue.js 开发环境中使用相对路径

Question

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

在 CSS 个文件中:

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

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

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

在 vue 模板中:

为了能够在生产中使用 inline images 我必须将路径包装在 require().default:

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

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

浏览器控制台显示：

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

规格：

Windows 10
Laravel: 8.55.0
Vue.js: 4.5.13

编辑：

根据@Chandan 的评论，我发现如果 images 文件夹在 public.

中，<img src="images/image.png"> 适用于两种环境

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

编辑2：

最终我的问题没有很好的解决办法。所以我停止使用 npm run hot，而是将 npm run watch 链接到 php artisan serve。现在我只使用 hot reload 的生产服务器。您可以查看如何设置它。

Answer 1

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

$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,
]);

然后通过运行

创建符号 link

php artisan storage:link

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

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

控制器是这样的：

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);
    }
}

最后在 PHP

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

或在 JS 中

const src = window.location.origin + image_path;

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

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

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

如何在 Vue.js 开发环境中使用相对路径

How to use relative paths in Vue.js dev environment

npm

laravel

vue.js

laravel-mix

laravel-artisan