解决vue中父组件传图片路径src给子组件却无法正常显示图片的原因

子组件Cover.vue

<div><div class="cover"><img :src="src" />...</div>
</div>props: {src: {type: String,required: true,},
}

父组件

// 引入子组件
<Cover src="@/assets/images/hello.png"></Cover>

在浏览器打开后，图片无法正常显示。
原因：在父组件中src的值被当作是普通字符串传给子组件，所以子组件只会当字符串处理，不会当作路径处理。

解决：结合require使用
父组件：

// 引入子组件
<Cover :src="require('@/assets/images/hello.png')"></Cover>

注意:require()只能接收常量

解决vue中父组件传图片路径src给子组件却无法正常显示图片的原因相关推荐

vue中父组件传图片路径src给子组件无法正常显示图片
vue父组件传值给子组件是以字符串的形式传值,图片路径无法解析导致无法显示. 父组件: 父组件传值路径: 应该使用require 或:将图片放到public的static里面,使用/static/图片 ...
解决 Vue 中路由跳转相同路径页面不刷新的问题
vue 中同一路由跳转由于不会重新执行生命周期,所以数据不更新.不管是动态路由,还是传参都不会刷新页面最简单最常用的方式是监听路由变化,在路由发生变化后执行一系列操作 watch: {$route( ...
解决vue中路由跳转同一个路径报错
在vue项目中,如果使用$router.push跳转到一个相同的路由会报错如何解决 vue-router在3.1.0版本之后,push和replace方法会返回一个promise对象,如果跳转到相同的 ...
vue本地没事放到服务器上无限循环,解决vue中的无限循环问题
项目中遇到了这样一个问题:每一种产品有对应的服务费,每一个商家有多种商品要单独计算每一家的服务费,最后汇总总的服务费用.我直接写了一个方法来计算出每个商家和总的服务费用并return出来.如果不看控制 ...
vue中父传子，父传孙说明
先来说一下,vue中父传往子组件用v-bind绑定属性,在子页面用props接收,子传往父的用$emit this.$emit('change',data),data就是你要传的数据,change为父 ...
一、vue中当数据在父组件需要给子组件传递数据的时候，子组件输出为undefined
父组件: <Type :imgList="imgList"/> 子组件: <img :src="imgList[0].imgUrl"/> ...
vue 父组件获取接口值传到子组件_vue父组件异步获取数据传给子组件的方法
但是现在问题是父组件的数据是异步获取的,而子组件一开始就会渲染,如果此时没有传入数据,而子组件又要用到数据中的length属性时就会报错: 怎么办呢?最简单的办法就是让子组件条件渲染,当有数据的时候才 ...
Vue钩子函数以及父组件的8个钩子和子组件的8个钩子的先后执行的顺序
** vue组件生命周期 ** 一个组件从创建到销毁的整个过程就是生命周期生命周期函数(钩子函数) vue 框架内置函数,随着组件的生命周期,自动按次序执行作用:特定的时间点,执行某些 ...
vue中文件上传方法
vue中文件上传方法(图片,表格) //html部分 <input type="file" id="people-export" ref="in ...

解决vue中父组件传图片路径src给子组件却无法正常显示图片的原因

解决vue中父组件传图片路径src给子组件却无法正常显示图片的原因相关推荐

最新文章

热门文章