vue项目中设置background: url() 是行内样式不生效，样式表是可以的

news2024/11/19 23:35:13

@[TOC](vue项目中设置background: url() 是行内样式不生效，样式表是可以的)

首先：如果不是项目中普通的一个index.html中是可以的

一、原因

在Vue项目中，行内样式和样式表的编译规则是有所不同的。当你在Vue组件的行内样式中使用相对路径引用图片时，编译后的结果将保持不变，即使用相对路径引用的图片路径。
例如，在你的示例中，行内样式的编译结果将仍然是 background: url(…/…/…/…/…/assets/images/emoji.png) no-repeat;。
而对于样式表中的样式，Vue会根据配置对静态资源进行处理，并将它们拷贝到输出目录（默认为 /static/ 目录）。这个过程会改变相对路径引用的图片路径。在你的示例中，…/…/…/…/…/assets/images/emoji.png 被替换为 /static/img/emoji.e68c0ea.png。

这种处理方式可以确保在构建过程中正确地引用静态资源。

处理办法----上代码

// 要解决行内样式中的编译问题，你可以使用 require 或 import 来引用图片，并将其转换为一个模块。这样，在编译后，Vue会处理这个模块并生成正确的路径。

<template>
  <span
    class="aa"
    :style="{
      width: '200px',
      height: '200px',
      display: 'inline-block',
      background: 'url(' + emojiImage + ') no-repeat'
    }"
  ></span>
</template>

<script>
export default {
  data() {
    return {
      emojiImage: require('../../../../../assets/images/emoji.png')
    }
  }
}
</script>

//或者
`<span class='emoji-face' style="
     width: 25px;
     height: 25px;
     display: inline-block;
     background: url(${this.emojiImage}) no-repeat;
     background-position: ${item.top} ${item.left};" ></span>`