vue页面图片不显示问题解决方案
vue页⾯图⽚不显⽰问题解决⽅案
在做新版组态界⾯的时候,⽤vue框架实现,在配置页⾯图⽚的时候发现有⼀张图⽚明明页⾯输⼊的路径是对的可是图⽚就是不显⽰出来
现象:
  network页⾯资源也不报错,⽽且状态码竟然还是200,点preview⾥⾯⼜什么都没有,后⾯⼀输⼊,发现随便输⼊什么字都是出现的200
解决办法:
  在webpack⾥⾯配置静态资源的路径
   1、到fig.js
盖世4
   2、在ports下⾯的devServer⾥⾯添加⼀个键
contentBase:path.join(_dirname,'src')
这句话的意思就是,webpack-dev-server 会使⽤当前的路径作为请求的资源路径seem用法
关于 contentBase,参考⽂章
静态资源:
⽅法⼀:直接输⼊路径
欢快的钢琴曲<img class="sys_logo" src="./assets/images/top-logo.png"/>
⽅法⼆:使⽤ require
import logoUrl  from './top-logo.png'
const Images = {
logoUrl
奇迹暖暖高分攻略组}
什么牌子护肤品好export default Images
⽅法三:模块化
import logoUrl  from './top-logo.png'
const Images = {
logoUrl
}
export default Images
使⽤:
i want nobody nobody but youjs:
import Images from './assets/images'
html:
<img class="sys_logo" :src="Images.logoUrl" />
到此这篇关于vue页⾯图⽚不显⽰问题解决⽅案的⽂章就介绍到这了,更多相关vue页⾯图⽚不显⽰问题内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持!

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。