Vue中显示动态绑定的img图片,显示不出来

1、如何是一个普通组件的话,那么这样就可以了
<img :src="./static/images/logo.png"

上面这种是写死的,下面让我们试试进行动态显示;

<div id="head">
            <img :src="logo" id="logo">  <!-- 图片当作一个模块加载 -->
            <p id="title">后台管理系统</p>
</div>
export default{
       data(){
            return {
             logo:require("./static/images/logo.png"),
            }
        },
 }
有时候我们的组件可能是一个子组件或者子子组件那么我们这样写

<script>
    import imgUrl from '@/static/images/logo.png'
    export default {
        name:'UserFace',
        data(){
            return {
              //imgUrl:require("@/static/images/logo.png");
              imgUrl,
            }
        }
    }
</script>
有时候src下面的路径…/是访问不到的,那么可以试试使用@代替…/
 

发布了36 篇原创文章 · 获赞 15 · 访问量 11万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览