Question

我正在使用vue-cli 3，并希望生成背景图像路径。因此，我在v-for循环中使用样式数据绑定。

组件：

<template>
    <ul>
      <li v-for="(tool, index) in tools" :key="index">
        <a href="#" :style="{ backgroundImage: 'url(@/assets/icons/' + tool + '.svg)' }"></a>
      </li>
    </ul>
</template>

<script>
export default {
  props: {
    tools: Array,
  }
}
</script>

图像在此文件夹中：src / assets / icons / xxx.svg

问题是，生成的图像路径似乎不正确，但我找不到错误。

Answer 1

那是因为webpack不会解析HTML内的任何路径（他不是那么聪明-yet-）。

无论如何，您可以欺骗webpack来获取您的URL。看起来真的不是我的最佳解决方案，但会回答您的问题。只需为包含所有工具及其图像路径的新列表创建一个计算属性。诀窍是让webpack解析该对象中的URL路径，然后在HTML中引用它

注意：我认为工具数组中的每个项目都是唯一的字符串。

<template>
    <ul>
      <li v-for="tool in items" :key="tool.name">
        <a href="#" :style="{ backgroundImage: `url(${tool.img})` }"></a>
      </li>
    </ul>
</template>

<script>
export default {
  props: {
    tools: Array,
  },
  computed: {
    items () {
      return this.tools.map(tool => {
        return {
          name: tool,
          // the trick is letting webpack parse the URL path for you
          img: require(`@/assets/icons/${tool}.svg`)
        }
      })
    }
  }
}
</script>

具有生成的样式数据绑定的参考资产

1 个答案: