Vue3实现加载本地图片和其他静态资源

更新时间：2026年07月01日 08:50:21 作者：码农键盘上的梦

这段文章详细介绍了在Vue3中加载本地图片和其他静态资源的四种方法,包括使用绝对路径、相对路径、require函数导入和import导入,并强调了根据具体需求选择合适方法的重要性

Vue3加载本地图片和其他静态资源有几种方法

一、使用绝对路径

将图片放在public目录下，然后使用绝对路径来引用它们。

例如，如果图片位于public/images/logo.png，可以在组件中使用：

<img src="/images/logo.png">

来加载它。

但是请注意：public目录下，图片不经过编译。

二、使用相对路径

如果图片和组件位于同一目录下，可以在模板中直接使用相对路径来引用本地图片和其他静态资源。

例如，如果图片位于与组件相同的目录下，可以使用

<img src="./logo.png">

来加载它。

三、使用require导入

Vue 3中，你可以使用require函数将图片作为模块导入，然后在组件中使用它。

首先，确保你已经安装了file-loader或url-loader插件。然后，在组件中使用以下代码：

<template>
  <div>
    <img :src="imageSrc" alt="My Image">
  </div>
</template>

<script>
import myImage from '@/assets/logo.png'; // 替换成你的图片路径

export default {
  data() {
    return {
      imageSrc: ''
    };
  },
  mounted() {
    this.imageSrc = require(`@/assets/logo.png`);
  }
};
</script>

也可以这样直接使用require函数来引用本地图片和其他静态资源。

例如：

<img :src="require('./assets/logo.png')">

在这个例子中，require('./assets/logo.png')将会返回一个包装了图片路径的模块路径。

注意，使用require函数需要在vue.config.js中进行配置。

四、使用import导入

如果你使用了Webpack等构建工具，也可以使用ES6的import语法来导入图片。

首先，确保你已经安装了file-loader或url-loader插件。然后，在组件中使用以下代码：

<template>
  <div>
    <img :src="imageSrc" alt="My Image">
  </div>
</template>

<script>
import myImage from '@/assets/logo.png'; // 替换成你的图片路径

export default {
  data() {
    return {
      imageSrc: ''
    };
  },
  mounted() {
    import(`@/assets/logo.png`).then((src) => {
        this.imageSrc = src.default;
    });
  }
};
</script>

总结

以上是几种加载本地图片和其他静态资源的方法，根据你的具体需求和项目配置选择适合的方法即可。

这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

创建vue项目没有router、view的解决办法
在学习vue的时候遇到很多问题,这里做一些总结,下面这篇文章主要给大家介绍了关于创建vue项目没有router、view文件夹的解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-11-11
Element-plus表格数据延迟加载的实现方案
本文介绍了在前端展示大量数据时遇到的加载卡顿问题,并提供了一种解决方案：延迟加载,具体做法是设置加载数量,对于数据量较大的情况,进行分批加载数据,通过类选择器找到表格滚动条并进行监听绑定事件,感兴趣的朋友跟随小编一起看看吧
2024-11-11
element-ui 表格实现单元格可编辑的示例
下面小编就为大家分享一篇element-ui 表格实现单元格可编辑的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
开发一个Parcel-vue脚手架工具(详细步骤)
这篇文章主要介绍了开发一个Parcel-vue脚手架工具(详细步骤)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
浅析vue.js数组的变异方法
本篇文章给大家分享了vue.js数组的变异方法的相关内容，有兴趣的朋友跟着学习参考下。
2018-06-06
vue-router的钩子函数用法实例分析
这篇文章主要介绍了vue-router的钩子函数用法,结合实例形式分析了vue路由钩子分类及vue-router钩子函数相关使用技巧,需要的朋友可以参考下
2019-10-10
vue初尝试--项目结构(推荐)
这篇文章主要介绍了vue初尝试--项目结构的相关知识,需要的朋友可以参考下
2018-01-01
Vue前端左侧菜单右侧内容的网站界面制作过程
这篇文章主要介绍了使用Vue和ElementUI制作一个带有左侧菜单和右侧内容区的网站页面的过程,文中通过CSS样式和深度作用符,实现了页面的美化和功能的完善,需要的朋友可以参考下
2025-02-02
Vue3使用watch监听响应式数据变化的方法详解
在 Vue 3 的组合式 API（Composition API）中,watch 是一个非常核心且强大的工具,用于监听响应式数据的变化并执行相应的副作用操作,本文将结合实际代码示例,深入讲解 watch 的使用方法、参数配置、常见写法及其应用场景,需要的朋友可以参考下
2026-02-02
vue设置必填项和判断必填项是否填入的弹窗提示
表格判断在很多项目中都用得到,本文主要介绍了vue设置必填项和判断必填项是否填入的弹窗提示,具有一定的参考价值,感兴趣的可以了解一下
2023-11-11