Css 如何使用props 为 Vue 中的组件创建动态背景图像

使用webpack(Vue-cli)时，@符号是src文件夹的别名.

如果URL以@开头，它也会被解释为模块请求.如果您的webpack配置有@的别名，这将非常有用，该别名默认指向由vue-cli创建的任何项目中的/src

Source个

如果您使用的是vite，则在vite.config.js中可能有以下内容；

resolve: {
     alias: {
          "@": fileURLToPath(new URL("./src", import.meta.url)),
          ...
     }
}

当资源URL位于以下html标签中时，VueLoader会对其进行转换:video、source、img、image(Svgs)和use(Svg).此外，如果您将VueLoader配置为使用css-loader，它还会转换标记中的资源URL.

所有编译后的css都由css加载器处理，css加载器解析url()并将其解析为模块请求.

Source个

当您对样式属性进行v绑定时，不会发生此资源URL转换.

您可以使用此机制将转换后的路径传递到不同的组件(例如，库中的组件).尽管如此，您仍然需要声明@道提到的每一条路径.

这里相关的一点是，VueLoader在编译应用程序时必须读取所有可能的路径并解析它们.

<script setup lang="ts">
import BackgroundImageViewer from './components/BackgroundImageViewer.vue'
import { ref, onMounted } from "vue";

const hiddenImage = ref<HTMLImageElement>();
const thePath = ref();

onMounted(() => {
    if (hiddenImage.value) {
        thePath.value = hiddenImage.value.src;
        hiddenImage.value.src = "";
    }
});
</script>

<template>
    <img src="@/assets/vue.svg" ref="hiddenImage" hidden />
    <BackgroundImageViewer :path="thePath"/>
</template>

正如@tao还提到的，如果不同图像的数量太多，您可以 Select 将这些图像放置在项目的public个文件夹中.

编辑:您也可以使用带有if-else树、ternary或switch语句的require方法来获取图像的相对路径(如果可以设置为背景的图像数量不是太多-否则使用public文件夹).

对于Vite，您可以使用vite-plugin-require插件来使require()工作.