vue SFC中图像src的最佳实践是啥？

Posted 2023-02-22

【中文标题】vue SFC中图像src的最佳实践是啥？

【英文标题】：What is best practice for image src in vue SFC?vue SFC中图像src的最佳实践是什么？

【发布时间】：2020-02-11 03:49:53

【问题描述】：

我正在使用 Laravel 5.8 和 Vue 2.6 并尝试在我的单个文件组件中使用图像文件的相对路径。我已经查看了How to import and use image in a Vue single file component? 中的建议 但无法让它工作。

尝试时：

<template>
  <div id="app">
    <img src="./assets/logo.png">
  </div>
</template>

<script>
export default 

</script>

<style lang="scss">
</style> 

我明白了：

未找到此相关模块： * ./assets/logo.png 在 ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib? ?vue-loader-options!./resources/js/components/xxxx.vue?vue&type=template&id=abd0e146&scoped=true&

当我尝试时：

<template>
  <div id="app">
    <img :src="image" />
  </div>
</template>

<script>
import image from "./assets/logo.png"


export default 
    data: function () 
        return 
            image: image
        
    

</script>

<style lang="scss">
</style> 

我明白了：

未找到此相关模块： * ./assets/logo.png 在 ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js / components/xxxx.vue?vue&type=script&lang=js&

我是否缺少 webpack-mix 或 vue-loader 的内容？

编辑：

使用简单的静态引用 (src="/assets/logo.png") 在本地开发服务器上有效，但在生产服务器上无效。

我已经看到了许多针对此基本图像文件引用的建议解决方案，但对存在如此多的可能性而不是单一的最佳实践感到困惑。再次，希望在开发和生产中使用 Laravel/Laravel Mix/Vue 和 SFC 时找到最佳实践。

【问题讨论】：

当你导入logo.png时，错误怎么会显示logo.jpg

对不起，这是一个 png 文件。我改变了我的问题以反映这一点。

您的图像存储在哪里？它在哪里？请完整路径

Laravel 5.8 使用公用文件夹进行部署。我的图片目前在公共文件夹中，所以绝对路径是“localhost:8000/public/img/widgets/logo.png”。以上为讨论之简化。

你在用php artisan serve吗？

【参考方案1】：

使用

<img src="@/assets/logo.png">

这将使用 webpack 并创建您的 logo.png 的散列版本。 或者在 JS 中使用：

:src="require('@/assets/logo.png');

【讨论】：

这给了我这个错误：“这个依赖没有找到：* @/assets/logo.png in ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader -options!./node_modules/vue-loader/lib? ?vue-loader-options!./resources/js/components/xxxx.vue?vue&type=template&id=abd0e146&scoped=true&

您确定您的徽标在正确的路径中吗？应该在 resources/assets/logo.png

谢谢，我已将文件移至资源/资产文件夹。不幸的是，同样的结果。您说使用 img 标签将使用 webpack 创建 png 的散列版本。我需要告诉 webpack 在资源文件夹中查找资产还是使用“@”前缀？

顺便说一句，我看到的所有参考资料都说将图像文件放在 public/ 文件夹中，而不是 Laravel 和 Larevel Mix 的 resources/ 文件夹中。

【参考方案2】：

在您的设置中有两种使用图像的方法：

与 webpack 捆绑在一起

<img src="./assets/logo.png">

import image from "./assets/logo.png" 

这些使用 webpack 捆绑图像，使用此解决方案您可以获得以下好处：

使用 base64 自动内联小图像 使用任何 webpack 加载器自动“深度”压缩 路径适用于您应用中的每条路径 编译时检查文件是否存在

使用您自己的网络服务器

const image = '/assets/logo.png'

const image = 'http://example.com/’

在这些解决方案中，您需要自己设置网络服务器来提供这些资源（或将它们放在公共目录中）

无需重建前端即可轻松更改为不同的图像 更灵活

【讨论】：

这些不起作用。请记住，我将 Laravel 框架与 Laravel-mix 一起使用。我怀疑这可能是这个规定的方法无法编译的原因。

【参考方案3】：

如果您的图片存储在公用文件夹中并且可以访问，您可以通过绝对路径链接到它，而不是使用相对路径./

<template>
    <div id="app">
        <img src="/public/img/widgets/logo.png" />
    </div>
</template>

<script>
export default ;
</script>

<style lang="scss">
</style>

假设你有这个结构

希望对你有帮助

【讨论】：

不起作用。编译正常，但无法解析路径。实际上， src="/asset/logo.png" 适用于开发服务器，但不适用于生产服务器。我仍在寻找 Laravel/Vue 的最佳实践。

这里没有“路径解析”，html按原样输出，即使图像根本不存在或路径完全不正确，它仍然会编译，确保图像实际上是在那条路线上，或者给我服务器上图像的 URL，我将创建一个沙箱，其中包含正确显示它的 vue 组件

如前所述，编译正常，并且图像确实显示为 src="/asset/logo.png"。

【参考方案4】：

对此的答案是，生产服务器的部署错误，试图指向“公共”文件夹，而不是在 public_html 上定位公共文件。

根据to this post 部署后，当然相对路径在开发和生产服务器上的工作方式完全相同。

唯一的区别在于server.php文件中Laravel 5.8的Step 5，

改变

if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) 
    return false;

到

if ($uri !== '/' && file_exists(__DIR__.'/public_html'.$uri)) 
    return false;

像

这样的相对路径

<img src="img/logo.png">

在任一服务器上工作相同。

很遗憾，Laravel 文档没有详细介绍这种部署方法，因为我怀疑有许多开发人员希望至少出于测试目的在共享服务器上进行部署。