zoukankan      html  css  js  c++  java
  • Vue打包项目图片等静态资源的处理

      项目打包,默认是打包在根目录下面的。当然我们可以通过设置,打包到任意子目录中去。 但是,当项目中引入资源的,比如:引入图片资源、js资源、或者字体图标之类的。那么可能在这个中间又会踩坑。

    1、在vue文件引入图片

      例如,我们将一张图片放到资源目录 /static/image/lyf.jpg 我们在 vue 文件中用下面的代码来使用这张图片。

    <img src="static/image/lyf.jpg" alt="">

    注意,最前面不要加 / ,如果是这样操作的话,会变成相对根目录调用图片。如果你的项目要打包到子目录的话,这样做就会出现问题。

    2、在 css 文件中,引用图片的处理

      还是上面那张图片,我们需要在 css 中来引用,如何来写呢?

    .love {
      background-image: url('../static/image/lyf.jpg');
    }

      这里为什么要加上 ../ 呢?

      如果是最终打包到根目录的话,可以使用 / 这种路径。这个是完全可以理解的。

      但,如果是打包到子目录,我们必须看下生成的最终路径:

    ├── index.html
    └── static
        ├── css
        │   └── app.a7a745952a8ca7f8c9413d53b431b8c8.css
        ├── image
        │   └── lyf.jpg
        ├── img
        │   └── lyf.9125a01.jpg
        └── js
            ├── app.39ccc604caeb34166b49.js
            ├── manifest.b1ad113c36e077a9b54d.js
            └── vendor.0b8d67613e49db91b787.js

      如上,我们可以看到这个 css 相对 图片 的路径的地址。

      你要疑问了,这样的相对路径,我们可以使用 ../image/lyf.jpg 来进行调用呀。嗯,看上去可以,但是,如果是这样的话,在开发模式中又会出错了。

      所以,还是要用 '../static/image/lyf.jpg' 这样的路径方式来调用图片。

  • 相关阅读:
    新闻列表中标题和日期的左右分别对齐的几种处理方法
    BFC
    css清除浮动float的几种方法
    git 恢复单个文件
    Git ignore
    198. House Robber(动态规划)
    121. Best Time to Buy and Sell Stock(股票最大收益)
    120. Triangle(动态规划 三角形最小路径 难 想)
    91. Decode Ways(动态规划 26个字母解码个数)
    53. Maximum Subarray(动态规划 求最大子数组)
  • 原文地址:https://www.cnblogs.com/goloving/p/8904386.html
Copyright © 2011-2022 走看看