zoukankan      html  css  js  c++  java
  • Vue绑定图片src出现的问题

    问题场景

    在使用Vue过程中,有时会动态改变图片的src,在此我遇到过无法正常显示图片的问题。
    首先来看父组件home,主要代码如下:

    图中photo是一个子组件,也是展示图片的,如下:

    图片和各组件层级关系如下:

    此时

    红线上面是photo组件内的img,下面是home的img。此时图片无法展示。

    执行一遍编译命令npm run build,编译结果输出到本地

    可以看出编译后,assets内的logo.png都没有被编译到dist/static目录。
    经查阅后发现,图片这种静态资源应该放在static目录下,因此将src/assets目录拷贝至项目根目录下的static目录,

    重新执行npm run build,如下图所示:

    此时dist/static目录下多出了asstes目录,图片都在static/assets目录,因此我们修改为 ./static/assets/logo.png或者 static/assets/logo.png,如下:

    展示:

    此时图片读取路径为http://localhost:8080/static/assets/logo.png,我的端口是8080。
    还有一种方式读取图片,那就是require直接加载图片源,如下:

  • 相关阅读:
    20140830 函数 递归
    函数 20140829
    结构体20140827
    20140826 集合
    20140822数组,应用举例
    140821 字符串,数字,日期及应用举例
    20140819 例子
    HTML基础
    登陆远程服务器
    索引 视图 游标
  • 原文地址:https://www.cnblogs.com/hzozj/p/13139470.html
Copyright © 2011-2022 走看看