动态require语句在Vue.js中不起作用

Question

尝试在vuejs中动态要求图像，但是它不起作用

  -l, --labels='': Comma separated labels to apply to the pod(s). Will override previous values.

Answer 1

<div class="card" :style="{ backgroundImage: 'url(' + image + ')' }">

Answer 2

而不是在html模板中执行require，而是在数据中使用它。

这样做的原因是Webpack解析了所有require语句，并在“编译”时解析了它们，而不是在运行代码时。这样一来，Webpack便可以删除您构建中未使用的图像，甚至将其转换为数据URL。

 <div class="card" :style="{ background: 'url(' + image + ')',}">



export default {
    data() {
        return {
            image: require("./assets/dance.jpg"),
        };
    }
};

请注意，需求是通过.vue文件所在的路径而不是项目的根目录来解决的（如果您使用@/开头的路径，则可以从src目录。