Nuxt.js中如何在Vue文件内联样式中正确配置background-image路径

失效原因 #

~static 是webpack配置的静态资源路径别名，该别名的自动解析能力仅在两个场景生效：

• 模板中静态属性的字面量值：例如<img src="~static/img/xxx.jpg">的静态字符串src，会被Vue模板编译插件自动识别、转译为资源最终可访问的地址
• 普通CSS/SCSS文件中书写的样式属性值

当把带~别名的路径直接写在动态绑定的:style对象的嵌套字符串值内部时，webpack和模板编译插件都不会穿透解析这个字符串里的路径规则，浏览器会将其识别为普通相对路径发起请求，最终导致资源加载失败。

正确实现方式 #

方式1：通过require显式触发资源解析 #

直接在绑定值里用require引入图片，让webpack主动完成路径转译，这是跨配置适配性最好的写法：

<li 
  :style="{ 
    backgroundImage: `url(${require('~static/img/info/production/pic5.jpg')})` 
  }" 
  class="sq"
>
  <div class="n">Third text</div>
</li>

require会返回经过webpack处理后的图片最终访问路径，拼入url()后的加载逻辑和普通<img>标签完全一致，不会出现路径解析错误。

方式2：提前import引入复用资源 #

如果同一张图片需要在页面多处使用，可以在script块中先引入图片完成解析，再将变量绑定到样式上：

<script>
// 顶部引入图片，webpack自动完成路径解析
import productionPic5 from '~static/img/info/production/pic5.jpg'

export default {
  data() {
    return {
      productionPic5
    }
  }
}
</script>

<template>
  <li 
    :style="{ backgroundImage: `url(${productionPic5})` }" 
    class="sq"
  >
    <div class="n">Third text</div>
  </li>
</template>

避坑提醒 #

• 不要硬编码'/static/img/info/production/pic5.jpg'这类绝对路径：当项目部署在非根域名路径下、或打包配置了非根路径的publicPath时，这类硬编码路径会直接失效
• 不要在动态绑定的style值中直接嵌入带~别名的字符串：这类写法绕过了webpack的资源解析流程，和静态属性的解析逻辑不打通，必然出现加载问题

内容的提问来源于stack exchange，提问作者KAVA