如何在 vue 组件上添加图像？

Posted 2023-02-16

【中文标题】如何在 vue 组件上添加图像？

【英文标题】：how to add an image on a vue component?

【发布时间】：2021-10-24 04:30:54

【问题描述】：

我尝试在我的 vue 组件上添加和图像：

<img src="/storage/app/product_images/up.png" >

但我收到此错误：

我确定该文件存在。

这是一个 laravel / vue 项目。

【问题讨论】：

你也可以在API中将图片作为base64传递，只需在后端创建一个图片并将其转换为base64并传递它，没人知道你的项目目录结构。

@GauravGupta 为什么要将图像作为 base64 传递？这将使 API 响应更大更慢。由于是 Laravel 应用，项目结构清晰。他只需要使用存储公共目录。

【参考方案1】：

尝试将图片放在public/img/中

并且在 Vue 组件中使用这样的路径

<img src="/img/product_images/up.png" >

Here你可以看我的回答详情

而here 是在 Laravel 和 Vue 捆绑包中使用图片的其他选项

【参考方案2】：

尝试将product_images 文件夹移动到storage->app->public 文件夹。然后使用此命令php artisan storage:link 创建符号链接。现在在模板中尝试<img src=" asset('storage/product_images/up.png' "> 或<img :src="'../storage/product_images/up.png'">

【讨论】：

我确实尝试了:src="'../storage/app/product_images/up.png'"，但没有任何改变，你确定我可以在 vue 组件上使用 laravel 符号链接吗？

你移动文件夹了吗？

并且路径中没有app

@Forbidenn 您可以使用符号链接，您的 img src 不需要..，只需src="/storage/product_images/up.png" 如果您使用的是静态链接，只需使用src 而不是:src