vue的图片放在什么地方 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue可以将图片放在以下几个地方：

<template>
  <div>
    <img src="/images/example.jpg" alt="example">
  </div>
</template>

这里，/images/example.jpg表示public文件夹下的images文件夹中的example.jpg图片。

assets文件夹：
在Vue项目的根目录中，可以找到一个名为"src"的文件夹，其中包含了你的项目的源代码文件。在这个文件夹中，Vue有一个默认的assets文件夹，你可以将图片放在这个文件夹中的任何子文件夹下。可以通过以下方式访问这些图片：

<template>
  <div>
    <img src="@/assets/images/example.jpg" alt="example">
  </div>
</template>

这里，@/表示src文件夹的路径，@/assets/images/example.jpg表示assets文件夹下的images文件夹中的example.jpg图片。

<template>
  <div>
    <img src="https://example.com/images/example.jpg" alt="example">
  </div>
</template>

这里，https://example.com/images/example.jpg是你想要引入的图片的完整URL地址。

总结：
无论你是将图片放在静态文件夹、assets文件夹还是引入外部链接，都可以通过<img>标签的src属性来引用图片。记住，如果你需要在Vue组件的模板中使用图片，需要使用相对路径或绝对路径来访问这些图片。

1年前 0条评论

不及物动词

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

在Vue.js中，图片通常放在assets文件夹下。这是因为assets文件夹是存放静态资源的地方，并且有以下几个优点：

目录结构清晰：将图片放在assets文件夹下，可以很方便地找到所有的静态资源，并且保持项目的目录结构清晰。
方便引用：在Vue组件中，可以通过相对路径引用assets文件夹下的图片，例如src="../assets/image.jpg"。Vue会将这些静态资源打包到最终的构建文件中。
自动处理：在项目构建过程中，Vue会自动将assets文件夹中的图片进行处理，例如压缩、优化等操作，以提高网页加载速度。
缓存优化：将图片放在assets文件夹下，可以使得浏览器在第一次加载后，将图片缓存到本地，下次再次加载相同的图片时，会直接从缓存中读取，提高页面加载速度。
扩展性：如果项目需要，可以在assets文件夹下创建子文件夹，例如assets/icons用于存放图标资源，assets/backgrounds用于存放背景图片等。这样可以更好地组织和管理静态资源。

需要注意的是，除了assets文件夹，也可以将图片放在其他地方，例如公共文件夹、CDN等。具体的选择取决于项目的需求和整体架构。

1年前 0条评论

worktile

Worktile官方账号

在Vue中，可以将图片放在以下几个地方：

静态文件夹：
在Vue项目的根目录中，有一个名为“public”的文件夹，可以将图片放在该文件夹中。在HTML代码中可以直接通过相对路径引用这些图片。例如，如果将图片放在public文件夹的img子文件夹中，可以这样引用：<img src="/img/example.jpg">。
静态资源文件夹：
在Vue项目的src目录中，可以创建一个名为“assets”的文件夹，将图片放在该文件夹中。可以通过导入图片的方式在项目中使用这些图片。例如，在Vue组件中可以这样导入图片：import exampleImage from '@/assets/example.jpg'。
远程图片链接：
如果图片已经上传到了远程服务器，可以直接通过图片的URL链接引用。可以将图片的URL链接作为<img>标签中的src属性的值。例如：<img src="https://example.com/example.jpg">。

需要注意的是，图片放在静态文件夹或静态资源文件夹中的方式，适用于项目中的静态图片。如果需要在Vue组件中动态地加载图片（例如从后端接口获取的图片数据），可以将图片数据保存在组件的数据属性或计算属性中，然后将图片数据绑定到<img>标签的src属性上。

1年前 0条评论