丽水做网站公司,关于电视剧的网站设计网页,注册安全工程师查询官网,企业运营流程vue中#xff0c;经常会遇到显示图片的问题#xff0c;
如果是一个普通组件的话#xff0c;那么这样就可以了
img src../assets/images/avtor.jpg width100%
上文的弊端有两个#xff1a;
首先#xff0c;是采用绝对路径引入。如果以…vue中经常会遇到显示图片的问题
如果是一个普通组件的话那么这样就可以了
img src../assets/images/avtor.jpg width100%
上文的弊端有两个
首先是采用绝对路径引入。如果以后图片移动了位置需要修改代码。
其次如果说图片是一个logo图片同一页面内有多处用到。就需要引用多次同理修改也要修改多处。
所以动态引入才是王道啊~如果想写成动态的呢可以试试如下办法
**图片当作一个模块加载 ** 方式1:
img :srclogo
import logo from assets/images/avatar.png;
data() {return {logo}
}方式2:
img :srclogo
data() {return {logo:require(assets/images/avatar.png)}
}注意错误写法
这个语法 写的不对, webpack打包的时候不会处理这样的, 是当作字符串来处理了。就跟CSS里你这么写 webpack也一样不会处理webpack会替换你的这个路径, 默认除了public目录下的静态资源原样打包,对于静态资源 有的小图会给你改成base64, 上面写的三元运算, webpack并不会执行那个运算, 因为是写在vbind里的, require和import这种实际上是打包了以后放那里等你用。三元里运算出来的结果 直接用的是打包后的资源。
