图片引入常见问题

错误描述

原因：url内部会报错，如“Cannot resolve directory”这种。

 <div
      style='width: 100%; height:100%;background-image: url("./assets/bg.jpg")'
      >
</div>

常见错误

我们知道常见的错误有：

1. 路径错误问题：多由于大小写错误和路径不完全匹配。
2. “@”别名解析问题：Vue CLI项目中，@指代src，看别名配置问题，常见于vue.config.js中。
3. Webpack配置问题：Webpack没有正确处理静态资源，所以解析出错。
4. 资源加载问题：图片文件可能未被正确加载或未包含在打包过程中。

但例子中明显是属于“Webpack没有正确处理静态资源”，所以提出几种解决方案供参考。

方法一：使用require解析路径

​ 在内联样式中使用require解析路径，以保证Webpack可以正确处理。

<template>
    <div :style="divStyle">
        
    </div>
</template>
<script>
export default { 
    name: "myComponent",
    computed: {
        divStyle(){
      return {
        width:"100%",
        height:"100%",
        backgroundImage:`url(${require("./assets/bg.jpg")})`,
        backgroundSize: 'cover',//可加可不加
        backgroundPosition: 'center'/可加可不加
      }
    }
  }
}
</script>

方法二：在style标签中写入样式

<template>
	<div class="divStyle">
        
    </div>
</template>
<script>
</script>
<style>
.divStyle{
  width:100%;
  height:100%;
  background-image:url("./assets/bg.jpg")
}
</style>

原因分析

为什么使用**background-image: url("./assets/bg.jpg")'**就会报错？

1. Webpack 的静态资源处理机制：Webpack 需要通过 css-loader 来解析 CSS 文件中的 url() 路径，并将其转换为模块依赖。如果直接在 CSS 中使用相对路径，Webpack 无法正确解析路径，导致资源无法加载。通过require和import，Webpack 可以识别这些静态资源并正确打包它们。
2. **动态路径解析：**使用 require 时，Webpack 能够在构建过程中解析路径，并将资源包括在最终的打包文件中。直接使用 background-image: url("./assets/bg.jpg") 会报错，因为 Webpack 无法在构建时识别和处理这个相对路径。正确的做法是使用 background-image: url(require('./assets/bg.jpg'))，这样 Webpack 在构建时可以解析路径并替换为正确的 URL。

​