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直接加载图片源,如下:

  • 相关阅读:
    快速幂 快速乘法
    扩展欧几里得学习笔记
    求逆序数数目(树状数组+离散化)
    隐式图的遍历
    随机数生成
    推倒重来
    动态规划初步
    子集生成
    东大oj1155 等凹函数
    P1278 单词游戏
  • 原文地址:https://www.cnblogs.com/hzozj/p/13139470.html
Copyright © 2011-2022 走看看