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

  • 相关阅读:
    传参问题-HttpMessageNotReableException
    排序03-简单排序法
    排序02-直接插入排序法
    排序01-冒泡排序法
    书摘
    CS229
    SLAM学习笔记
    形态学图像处理
    SLAM学习笔记
    SLAM学习笔记
  • 原文地址:https://www.cnblogs.com/hzozj/p/13139470.html
Copyright © 2011-2022 走看看