Vue项目中轻松解决背景图片路径烦恼：实用技巧大揭秘

1. 使用CSS背景图片属性

1.1 背景图片路径

div {
  background-image: url("/path/to/image.jpg");
}

1.2 背景图片填充

div {
  background-image: url("/path/to/image.jpg");
  background-size: cover;
}

1.3 背景图片位置

div {
  background-image: url("/path/to/image.jpg");
  background-size: cover;
  background-position: center;
}

2. 使用Vue的require语法

<template>
  <div :style="{ backgroundImage: 'url(' + require('@/assets/image.jpg') + ')' }"></div>
</template>

在这个例子中，@符号通常被用作别名，指向src目录。

3. 使用Webpack配置处理图片路径

3.1 配置url-loader

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'img/[name].[hash:7].[ext]'
            }
          }
        ]
      }
    ]
  }
};

4. 使用Vue CLI的默认配置

<template>
  <div :style="{ backgroundImage: 'url(/path/to/image.jpg)' }"></div>
</template>

结论