我不能用vuejs制作动态背景图像，url不工作

Question

我试着用不同的背景图像制作6个街区，我尝试了不同的选择，但它们都不起作用，

这样做是可行的：

<div :style="{ backgroundImage: `url(${require('../assets/images/img/img-1.jpg')})` }"></div>

即使“测试”实际上是img的正确路径，这两种方法也不能工作：

<div :style="{ backgroundImage: `url(${require(test)})` }"></div>

<div class="col-4 jum-block" :style="{ backgroundImage: 'url(' + require(test) + ')' }"></div>

<script>
export default {
   name: "Component",
   data() {
      return {
         test: "../assets/images/img/img-1.jpg",
         cardImgPath: "../assets/images/img/",
         images: [
            { img: "img-1.jpg" },
            { img: "img-2.jpg" },
            { img: "img-3.jpg" },
            { img: "img-4.jpg" },
            { img: "img-5.jpg" },
            { img: "img-6.jpg" },
         ],
      };
   },
};
</script>

Answer 1

考虑到require()的使用，我假设您的项目是一个基于Webpack的项目( Vue CLI的脚手架)。

require()参数不能是同一个reason that import() calls cannot的完全动态表达式

导入()中的

动态表达式

不可能使用完全动态的导入语句，例如import(foo)。因为foo可能是系统或项目中任何文件的任何路径。

import()必须至少包含一些有关模块所在位置的信息。捆绑可以限制在特定目录或文件集上，以便在使用动态表达式时--包括在import()调用中可能被请求的每个模块。例如，import(`./locale/${language}.json`)将导致./locale目录中的每个.json文件绑定到新块中。在运行时，当计算变量语言时，任何文件(如english.json或german.json )都可供使用。

//假设我们有一种方法从cookies或其他存储中获取语言，const语言= detectVisitorLanguage()；导入(./locale/${language}.json).then((模块) => { //处理翻译})；

在这种情况下，可以将require()参数更改为包含图像的路径目录：

<div v-for="image in images"
    :style="{ backgroundImage: `url(${require('../assets/images/img/' + image.img)})` }" ></div>

<script>
export default {
   data() {
      return {
         images: [
            { img: "img-1.jpg" },
            { img: "img-2.jpg" },
            { img: "img-3.jpg" },
            { img: "img-4.jpg" },
            { img: "img-5.jpg" },
            { img: "img-6.jpg" },
         ],
      };
   },
};
</script>