vue中设置内联样式style 动态绑定背景图backgroundimage不生效问题,以及动态绑定img的src,图片无法显示问题(src=“[object Module]“)

(以下情况是通过style设置内联样式以及动态绑定img的src时发生的问题,.在外部css文件和style标签里面定义的样式不会出现以下问题)
我们可能会通过以下这种方式来设置元素的背景(注意元素需设置宽高,或者元素里有内容支撑)

使用vue-cli创建项目后,使用以下三种方式设置背景样式时,第一种方式无法生效,后面两种方式OK
在这里插入图片描述
使用第一种方式时,无论这里用@/assets/logo.png,~@/assets/logo.png,…/assets/logo.png作为背景图片路径都无法成功,这里确定,图片路径是没有问题的
vue中设置内联样式style 动态绑定背景图backgroundimage不生效问题,以及动态绑定img的src,图片无法显示问题(src=“[object Module]“)_第1张图片
我们来看一下,在浏览器中对应的标签和样式是怎么样的
vue中设置内联样式style 动态绑定背景图backgroundimage不生效问题,以及动态绑定img的src,图片无法显示问题(src=“[object Module]“)_第2张图片
可以看到,第一个div标签的背景图片路径还是和之前设置的一样,而后面两个的路径都发生了相应的改变,由此可见,当项目打包后,下面两种方式都将路径解析成打包后的对应路径了,而第一种情况并没有发生改变,再去访问这个路径当然就访问不到了。

解决:

所以如果我们需要使用style来动态绑定背景图的时候,可以使用下面两种方式
vue中设置内联样式style 动态绑定背景图backgroundimage不生效问题,以及动态绑定img的src,图片无法显示问题(src=“[object Module]“)_第3张图片
动态绑定img的src时也可以使用以上两种方法来解决图片路径不对而导致的图片不显示问题

补充:*src=“[object Module]”

最近发现,之前可以显示的图片现在不能显示了,之前通过require这种方式动态赋值的或者直接使用相对路径都有这种问题
在这里插入图片描述
在浏览器中解析出来的结果是src=“[object Module]”
vue中设置内联样式style 动态绑定背景图backgroundimage不生效问题,以及动态绑定img的src,图片无法显示问题(src=“[object Module]“)_第4张图片
解决:
方法1. 在require方法后面加上.default(线上可能不生效)
在这里插入图片描述
方法2. 在webpack配置中为图片的url-loader设置esModule属性为falsevue中设置内联样式style 动态绑定背景图backgroundimage不生效问题,以及动态绑定img的src,图片无法显示问题(src=“[object Module]“)_第5张图片

你可能感兴趣的:(backgroundimage,vue,css)