vue中img或元素背景图片无法显示或路径错误的解决

Zahirah ·

更新时间:2024-11-13

· 1903 次阅读

img或元素背景图片无法显示或路径错误

背景图片打包后出现的路径引用错误问题

img或元素背景图片无法显示或路径错误

1.在给vue中img元素动态绑定图片路径时会显示不出来图片：

<span>普通:</span><img src="./video.png" alt="" srcset="">
<span>动态绑定:</span><img :src="'./video.png'" alt="" srcset="">

2.解决方案：使用require或import：

<span>require1:</span><img :src="require('./video.png')">
<span>require2:</span><img :src="img1">
<span>import:</span><img :src="img2">
import img1 from './video.png'
export default {
  data() {
    return {
        img1: img1,
        img2: require('./video.png')
    }
  }
}

3.同理给元素绑定背景图片也是使用这种方式：

<i :style="`background-image: url( ${require('./video.png')} )`"></i>

背景图片打包后出现的路径引用错误问题

在本地写好的页面，测试展示效果都是正常的，经过打包后，背景图片不展示，经过排查后，发现是引用路径有问题。

<div :style="logo"></div>

data(){
    return{
        logo: {
            backgroundImage: "url(" + require("../../../images/logo.png") + ")", // 背景图片
            backgroundRepeat: "no-repeat", 
            backgroundSize: "50% 100%",
            backgroundPosition: "center",
      },
    }
}

修改后，在经过打包部署，背景图片就可以正常显示了。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。

VUE 图片 img 背景图

1024 个赞