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

Question

我在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 (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")不起作用。有什么见解吗?

Edit2:

最后，我的问题没有好的解决办法。所以我停止使用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,
]);

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

php artisan storage:link

那么你可以创建这样的路由:

Route::get('image/{slug}/',[AppHttpControllersImageController::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;

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

但这是如果你想实现一个private文件夹，并希望确保用户在访问图像之前必须登录!但是如果你的文件夹是public你应该只需要输入

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