vue 中图片引用问题

前言

总结一下，vue中图片引用路径的情况。

图片在public文件夹中

因为public文件夹下静态资源，不经过 webpack，需要通过绝对路径来引用，所以，如果引用的图片在public文件夹中，则无论是html/js/css中，均以baseUrl（一般是“/”）开头书写路径，例如：

xml
复制代码
<style>
.example{
   background: url('/bg.png')  right bottom no-repeat
}
</style>
​

图片在src-assets文件夹中

因为assets文件夹下的图片等静态资源，经过 webpack，需要通过相对路径引用，所以我们可以分情况按如下方式引用：

1. js中引用图片

• require 引入

</template>
<div style="display:flex;">
    <div v-for="item in imgUrl" :key="item.id">
      <img :src="item.imgSrc" class="num" />
    </div>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      imgUrl: [
        { id: 1, imgSrc: require("@/assets/images/1.jpg") },
        { id: 2, imgSrc: require("@/assetsimages/2.jpg") },
        { id: 3, imgSrc: require("@/assets/images/3.jpg") },
      ],
    };
  },
};
</script>

require 是 node 中的一个方法，他的作用是 “用于引入模块、 JSON、或本地文件”。用require定义之后就可以动态使用了。

而@是webpack设置的src文件夹的路径别名，不用@的话则按相对路径找到该图片即可。

• import导入

</template>
<div>
   <img class="" :src="imgUr" alt="">
</div>
</template>
​
<script>
    
import imgUrl from "@/assets/images/1.jpg"
    
export default {
  data() {
    return {
      imgUr
    }
  }
}
</script>

2. css中引用图片

<style>
.example {
  background: url(~@/assets/logo.png) no-repeat; 
} 
</style>

~ 是 stylus-loader 的东西，是相对于其他路径（文件）的，类似于相对路径。

css中引用图片需要用~@或者相对路径，并且不要写成字符串。

3. html中引用图片

<template>
<img src="~@/assets/logo.png" alt=""> 
<img src="@/assets/logo.png" alt="">
<img src="../../assets/logo.png" alt="">
</template>

html中引用图片，使用@或者~@或者相对路径都行。

总结

文章转载自：juejin.cn/post/719502…