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

Posted 2023-02-22

【中文标题】如何在 Vue.js 开发环境中使用相对路径

【英文标题】：How to use relative paths in Vue.js dev environment

【发布时间】：2021-10-27 08:44:50

【问题描述】：

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

在 CSS 文件中：

开发环境npm run hot只接受像/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" >

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 的评论中我发现<img src="images/image.png"> 适用于两种环境，如果images 文件夹位于public 内。

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

编辑2：

最后我的问题没有好的解决方案。所以我停止使用npm run hot，而是将npm run watch 链接到php artisan serve。现在我只使用hot reload 的生产服务器。可以看here怎么设置。

【问题讨论】：

你的图片应该在 laravel 公共文件夹中。看看here请

@NikolaPavicevic 我尝试实现它，但它破坏了我的项目。有没有办法不编写新函数来“欺骗”框架？

我刚刚查看了我的一个项目。我将图像放在 laravel 公共文件夹（不是存储）中，然后放在 vue 组件 :src="images/'+imageName"

@ArturMüllerRomanov 看看这个post。

@Chandan 谢谢！你能看一下edit部分吗？

【参考方案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/',[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;

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

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

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