Vue 引入图片

Vue引入图片

在 Vue 项目中，图片可以存放在 public 和 assets 两个文件夹中，但两者之间存在显著的区别。以下是这两个文件夹存放图片的主要差异：

一、存放位置与处理方式

• public 文件夹： 存放内容：适合存放那些不需要经过 Webpack 处理的静态资源，如图片、视频、音频等。 处理方式：放在 public 文件夹中的资源，在构建时会被原封不动地复制到 dist 目录中，且可以通过根 URL 直接访问。 路径引用：在 Vue 组件中引用 public 文件夹中的资源时，无需使用 require 或 import，而是直接使用绝对路径（以/开头）或相对路径（相对于根目录）。
• assets 文件夹： 存放内容：适合存放那些需要作为 Vue 组件一部分的静态资源，如图标、背景图片等。 处理方式：放在 assets 文件夹中的资源，会被 Webpack 处理，如压缩、重命名等，以减少体积并优化加载性能。处理后的资源会被放在 dist 目录的某个子目录中（通常是/img），且其路径在构建后会发生变化。 路径引用：在 Vue 组件中引用 assets 文件夹中的资源时，需要使用相对路径（相对于 src 目录），并通过 require 或 import 来引入。 assets 文件夹下的图片资源动态引入的话需要使用 require

二、访问方式与动态性 public 文件夹

• 访问方式：由于 public 文件夹中的资源在构建后仍然保持原路径和文件名，因此可以通过绝对路径直接访问。
  • 动态性：适合存放那些需要动态加载或频繁更新的资源，如用户上传的图片等。
• assets 文件夹： 访问方式：由于 assets 文件夹中的资源在构建后路径会发生变化，且被 Webpack 打包成模块，因此不能通过简单的 URL 直接访问。需要通过 Vue 组件中的 require 或 import 来动态引入。
  • 动态性：相对较差，因为资源路径在构建后固定，不适合存放需要频繁更新的资源。但适合存放那些不需要变化的图标、背景图片等。 三、适用场景 public 文件夹： 适用于那些需要直接通过 URL 访问的资源，如网站的 Logo、轮播图、广告图等。 适用于那些需要动态加载或频繁更新的资源，如用户头像、商品图片等。
  • assets 文件夹： 适用于那些作为 Vue 组件一部分的资源，如按钮图标、页面背景图片等。 适用于那些不需要频繁更新的资源，如应用内的固定图标、导航栏背景等。

综上所述，Vue 项目中图片存放到 public 和 assets 文件夹的区别主要体现在存放位置与处理方式、访问方式与动态性以及适用场景上。开发者应根据具体需求选择合适的文件夹来存放图片资源。

在 Vue 项目中，如果你想通过浏览器直接访问查看图片文件，通常需要确保这些图片文件被放置在一个可以通过 HTTP 服务器访问的目录中。以下是几种常见的方法：

方法一将图片放在 public 目录中 Vue CLI 创建的项目中有一个 public 文件夹，这个文件夹中的所有内容都会在构建时被复制到最终的 dist 目录中，并且可以直接通过根 URL 访问。

将图片文件放在 public 文件夹中： public/
├── images/
│ └── my-image.png 在 Vue 组件中访问图片： html 或者，你可以通过完整的 URL 来访问图片（假设你的应用运行在 http://localhost:8080 http://localhost:8080/images/my-image.png

方法二： 将图片作为静态资源在开发服务器中访问 在开发模式下，你可以使用 Vue CLI 提供的开发服务器，它会自动处理 public 目录和 src/assets 目录中的静态资源。

将图片放在 src/assets 目录中： src/
├── assets/
│ └── images/
│ └── my-image.png 在 Vue 组件中访问图片（注意：这里使用的是相对路径，Webpack 会处理这些路径）： html 在构建后，这些资源会被处理并放在最终的 dist 目录中，但你不能直接通过浏览器访问 dist/assets 目录下的资源，因为它们是由 Webpack 打包的一部分。

方法三： 通过配置静态资源路径在构建后访问 如果你希望在构建后仍然能够直接访问某些资源，你可以配置静态资源路径。

配置 vue.config.js 文件（如果你使用的是 Vue CLI）：

javascript module.exports = {  
    configureWebpack: {  
        devServer: {  
        static: path.join(__dirname, 'public'),  
        },  
    },  
}; 

将图片放在 public 文件夹中（同上）。 访问图片（同上）。

 <ul class="task-items">
    <li
        v-for="(item, index) in items"
        :key="index"
        class="task-item"
    >
        <img
            :src="
                `../../../assets/home_Images/num/` + index + `.png`
            "
            width="22"
            height="22"
            class="task-img"
        />
        <span class="task-title" v-text="item.name"></span>
        <span class="task-date" v-text="item.createdOn"></span>
    </li>
</ul>

// img 图片应该修改为通过 require 引入才能正确显示
<img
  :src="
      require(`../../../assets/home_Images/num/` +
          index +
          `.png`)
  "
  width="22"
  height="22"
  class="task-img"
  />

assets文件夹路径下的图片引入

• 不通过 require 引入的图片显示图片失败：

• 修改之后正常显示的图片如下：