uni-app 中 css 在 after before 中使用 v-bind 引用图片不生效

uni-app 中 css 在 after before 中使用 v-bind 引用图片不生效

开发环境 版本号 项目创建方式
Windows 11 CLI

产品分类：uniapp/App

PC开发环境操作系统：Windows

手机系统：Android

手机系统版本号：Android 12

手机厂商：小米

手机机型：k30s

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：CLI

CLI版本号：3.0.0-4010420240430001

示例代码：

```scss
&::after {  
    content: "";  
    display: block;  
    width: 30rpx;  
    height: 30rpx;  

    background: url('/static/index/projectIcon1.svg'); // 生效  

    background: v-bind("'url(' + theme.images.index.projectIcon1 +')'"); // 不生效  

    background-repeat: no-repeat;  
    background-size: 100% 100%;  
    margin-left: 10rpx;  
}

操作步骤：

&::after {  
    content: "";  
    display: block;  
    width: 30rpx;  
    height: 30rpx;  

    background: url('/static/index/projectIcon1.svg'); // 生效  

    background: v-bind("'url(' + theme.images.index.projectIcon1 +')'"); // 不生效  

    background-repeat: no-repeat;  
    background-size: 100% 100%;  
    margin-left: 10rpx;  
}

预期结果：

出现图片

实际结果：

不生效

bug描述：

在 h5 中是好使的，app 在 after before 中不生效。
如果以正常方式写 background: url('/static/index/projectIcon1.svg'); 是生效的。

更多关于uni-app 中 css 在 after before 中使用 v-bind 引用图片不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 中 css 在 after before 中使用 v-bind 引用图片不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 ::after 和 ::before 伪元素时，如果尝试通过 v-bind 动态绑定图片路径，可能会遇到不生效的问题。这是因为 ::after 和 ::before 伪元素的内容是 CSS 的一部分，而 v-bind 是 Vue.js 的指令，无法直接在 CSS 中使用。

要解决这个问题，你可以通过以下几种方式来实现动态绑定图片路径：

1. 使用 style 绑定

你可以通过 Vue 的 style 绑定来动态设置 ::after 或 ::before 的背景图片。

<template>
  <div class="custom-element" :style="customStyle"></div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.png'
    };
  },
  computed: {
    customStyle() {
      return {
        '--image-url': `url(${this.imageUrl})`
      };
    }
  }
};
</script>

<style scoped>
.custom-element::after {
  content: '';
  display: block;
  width: 100px;
  height: 100px;
  background-image: var(--image-url);
}
</style>

2. 使用 class 绑定

你可以通过动态绑定 class 来切换不同的样式类，从而实现不同的背景图片。

<template>
  <div :class="['custom-element', { 'with-image': hasImage }]"></div>
</template>

<script>
export default {
  data() {
    return {
      hasImage: true
    };
  }
};
</script>

<style scoped>
.custom-element::after {
  content: '';
  display: block;
  width: 100px;
  height: 100px;
}

.with-image::after {
  background-image: url('https://example.com/image.png');
}
</style>

3. 使用 v-if 或 v-show

如果你只需要根据条件显示不同的图片，可以使用 v-if 或 v-show 来切换不同的元素。

<template>
  <div>
    <div v-if="hasImage" class="custom-element with-image"></div>
    <div v-else class="custom-element"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hasImage: true
    };
  }
};
</script>

<style scoped>
.custom-element::after {
  content: '';
  display: block;
  width: 100px;
  height: 100px;
}

.with-image::after {
  background-image: url('https://example.com/image.png');
}
</style>

4. 使用 background-image 直接绑定

如果你不需要使用伪元素，可以直接在元素的 style 中绑定 background-image。

<template>
  <div class="custom-element" :style="{ backgroundImage: `url(${imageUrl})` }"></div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.png'
    };
  }
};
</script>

<style scoped>
.custom-element {
  width: 100px;
  height: 100px;
}
</style>
回到顶部