明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
  博客园  :: 首页  :: 管理

Vue中动态(import 、require)显示img图片

Posted on 2023-12-21 09:12  且行且思  阅读(443)  评论(0编辑  收藏  举报

vue中,经常会遇到显示图片的问题,

如果是一个普通组件的话,那么这样就可以了

<img src="../assets/images/avtor.jpg" width="100%">

上文的弊端有两个:

首先,是采用绝对路径引入。如果以后图片移动了位置,需要修改代码。

其次,如果说图片是一个logo图片,同一页面内有多处用到。就需要引用多次,同理,修改也要修改多处。

所以,动态引入才是王道啊~如果想写成动态的呢,可以试试如下办法:

**图片当作一个模块加载 **
方式1:

<img :src="logo">
import logo from '@assets/images/avatar.png';
data() {return {logo}
}

方式2:

<img :src="logo">
data() {return {logo:require("@assets/images/avatar.png")}
}

 

注意错误写法

这个语法 写的不对, webpack打包的时候不会处理这样的, 是当作字符串来处理了。就跟CSS里你这么写 webpack也一样不会处理,webpack会替换你的这个路径, 默认除了public目录下的静态资源原样打包,对于静态资源 有的小图会给你改成base64,
上面写的三元运算, webpack并不会执行那个运算, 因为是写在vbind里的,
require和import这种实际上是打包了以后放那里等你用。三元里运算出来的结果 直接用的是打包后的资源。