zoukankan      html  css  js  c++  java
  • webpack+vue img的src问题

    在vue中给图片添加路径试过三种方式:

    1.在css的background中添加路径;

    2.将路径写在data属性中,然后动态注入img标签的src属性;

    3.在img标签中奖src属性写死

    第三种方式会报错!第三种方式会报错!第三种方式会报错!

    因为打包的时候必须写以当前组件为参照的相对路径,否则打包回报错说找不到;但是打包完打开页面,img的路径还是打包时的相对路径,但此时已经设置了publicPath,最终结果是pubilcPath+相对路径,导致404错误。

    第一种方式,作为css背景图片,路径应该写相对于当前组件的路径;

    第二种方式,作为字符串变量动态注入给img的:src属性,路径应该写相对于当前页面的路径。

      比如img标签在index.html中,而图片在index同级的src文件夹的img子文件夹中,应该写'./src/img/xxx.jpg'

    还有第三种方式是,仍然把img的src作为data属性中的变量,但此时写成下面的形式:

    1 data(){
    2   return{
    3     img:require(/path/to/img)    
    4   }
    5 }

    require(/path/to/img)   中  require里面是图片相对于组件的相对路径。

  • 相关阅读:
    ubuntu下erlang man的安装
    ranch分析学习(四)
    ranch分析学习(三)
    ranch分析学习(二)
    ranch分析学习(一)
    IIS 配置错误解决方法集合
    Visual Studio 2013中添加mimeType
    wordpress 开发日志及技巧收集
    css3 动画
    高宽比例计算方法及等比高宽修改计算方法
  • 原文地址:https://www.cnblogs.com/alan2kat/p/7442674.html
Copyright © 2011-2022 走看看