gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 12:41:36 29 4
gpt4 key购买 nike

我正在使用 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 的最佳实践。

最佳答案

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

与 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)目录中)

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

关于laravel - vue SFC 中图像 src 的最佳实践是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58378154/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com