vue之踩坑之 img图片无法显示

img图片无法显示问题描述：img的src以及成功显示，也给img设置了宽高等等，但是审查元素的时候，宽高依然显示为0，在确保自己写的样式是没有问题的情况下，第一次感觉到代码的叛逆解决方案：在写css的时候，不能给img标签本身加样式，在组件中直接给img加上 width：100%，height：100%；有相关的样式，可以再组件中写行间样式，或者是给img标签嵌套一个元素，将相关的样式...

碎碎。

4093人浏览 · 2018-12-15 19:34:22

碎碎。 · 2018-12-15 19:34:22 发布

问题描述：

img的src已经成功显示，也给img设置了宽高等等，但是审查元素的时候，宽高依然显示为0，在确保自己写的样式是没有问题的情况下，第一次感觉到代码的叛逆

解决方案：

在写css的时候，不能给img标签本身加样式，在组件中直接给img加上 width：100%，height：100%；有相关的样式，可以再组件中写行间样式，或者是给img标签嵌套一个元素，将相关的样式添加在父级元素身上。
如果以上修改依然没有出来，将img的src用require引入

this.sexImg = require("../../assets/images/funs/man.png")
<img :src="sexImg" alt="" width="100%" height="100%">

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^