vue项目图片用什么路径 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

在Vue项目中使用图片路径有多种方式：

相对路径：相对于当前文件的路径指定图片位置。例如，如果你的图片在与Vue组件文件相同的目录下，你可以使用简单的相对路径来引用图片：
```
<template>
  <img src="./image.png" alt="图片" />
</template>
```
绝对路径：在Vue组件中使用绝对路径引用图片，通常是以根目录为基准。在Vue项目中，可以使用@来表示项目根目录，然后再在其后面添加具体路径：
```
<template>
  <img src="@/assets/image.png" alt="图片" />
</template>
```
使用public文件夹：Vue CLI 创建的项目中，有一个public文件夹，这个文件夹内的文件可以直接通过相对路径引用。例如，将图片放在public文件夹下的images子文件夹中，可以这样引用：
```
<template>
  <img src="/images/image.png" alt="图片" />
</template>
```

无论你选择使用哪种方式，记得在代码中正确引用图片的路径，确保路径的准确性和正确性。

1年前 0条评论

worktile

Worktile官方账号

在Vue项目中，可以使用相对路径和绝对路径来引用图片。

相对路径：相对路径指的是相对于当前文件所在位置的路径。可以使用相对路径引用项目中的图片。例如，如果图片与当前文件在同一文件夹下，可以直接使用相对路径引用，如<img src="./image.jpg">。
绝对路径：绝对路径指的是从根目录开始的完整路径。在Vue项目中，可以使用绝对路径引用图片。可以在Vue的配置文件vue.config.js中使用publicPath来配置项目的根路径，然后在模板中使用绝对路径引用图片，如<img src="/image.jpg">。
静态资源目录：在Vue项目中，可以使用静态资源目录来存放图片。可以在Vue的配置文件vue.config.js中使用assetsDir来配置静态资源目录的路径，然后在模板中使用相对路径引用图片，如<img src="~@/assets/image.jpg">。
require()函数：在Vue项目中，可以使用require()函数来引用图片。require()函数可以将图片作为模块导入，然后在模板中使用引入的模块来展示图片，如<img :src="require('./image.jpg')">。
使用URL变量：在Vue项目中，还可以使用URL变量来引用图片。可以在Vue的配置文件vue.config.js中使用publicPath和process.env来配置图片的URL变量，然后在模板中使用URL变量来引用图片，如<img :src="${process.env.VUE_APP_URL}/image.jpg">。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

在Vue项目中，可以使用相对路径或绝对路径来引用图片。

相对路径：
使用相对路径引用图片是最常用的方法之一。相对路径是基于当前文件所在位置的相对路径。在Vue项目中，通常将图片放置在src/assets目录下，因此可以使用相对路径来引用这些图片。

a. 在Vue组件的<template>标签中使用相对路径引用图片：
```
<template>
  <div>
    <img src="../assets/image.jpg" alt="图片">
  </div>
</template>
```
b. 在Vue组件的<style>标签中使用相对路径引用背景图片：
```
<style scoped>
  .image {
    background-image: url(../assets/image.jpg);
  }
</style>
```
这里使用../来表示父级目录，根据图片所在的具体位置，可能需要根据实际情况调整相对路径的层级关系。
绝对路径：
如果项目的图片不是放在src/assets目录下，而是放在外部文件夹或者远程服务器上，可以使用绝对路径来引用图片。绝对路径是指从站点的根目录开始的完整路径。

a. 在Vue组件的<template>标签中使用绝对路径引用图片：
```
<template>
  <div>
    <img src="/images/image.jpg" alt="图片">
  </div>
</template>
```
这里的/表示站点的根目录。

b. 在Vue组件的<style>标签中使用绝对路径引用背景图片：
```
<style scoped>
  .image {
    background-image: url(/images/image.jpg);
  }
</style>
```
同样，这里的/表示站点的根目录。

需要注意的是，如果项目使用了路由器（Vue Router），并且通过路由进行页面跳转，那么在使用绝对路径引用图片时，需要在图片的路径前添加~符号来表示站点的根目录。例如，使用Vue Router的情况下，在src/assets目录下的图片可以使用~/assets/image.jpg来引用。

1年前 0条评论