laravel - vue SFC 中图像 src 的最佳实践是什么？

Question

我正在使用 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> 

我明白了:

This relative module was not found: * ./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&

当我尝试时:

<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> 

我得到:

This relative module was not found: * ./assets/logo.png in ./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 的最佳实践。

Answer 1

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

与 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/’

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

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