问题描述
我在 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 开发环境中使用相对路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!