Vue 动态引入图片的两种方式

最新推荐文章于 2025-06-13 13:28:58 发布
最新推荐文章于 2025-06-13 13:28:58 发布
阅读量2.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/JDDDDDDyaya/article/details/117289864
本文详细介绍了Vue项目中如何通过动态变量引入public文件夹下的图片，涉及路径写法、publicPath配置及require引入的注意事项。重点讲解了配合publicPath确保图片显示的技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文件结构:
在这里插入图片描述

  • Vue 动态引入图片的两种方式
    1. 把图片放在public下面，放在 public下面的图片不会被webpack处理，而是直接拷贝，在代码通过 /images/${variable}.png 引入的图片，处理之后就会把variable换成对应的字符串，比如这里就换成了 /images/apple.png, / 路径就是public文件夹，所以能够正常引入(Vue 项目的根路径就是 public，所以能够通过 / 引入图片， 这种方式还需要配合 publicPath 才能正常展示图片 vue publicPath)
    1. 比如当前在main.js 里面，通过 require(‘…/public/images/apple.png’)的方式来引入，要写相对路径，不能写 / 开头的路径
vue中动态引入图片为什么要是require， 你不知道的那些事
sybh的博客
11-01 8207
与静态资源相对应的还有一个动态资源，先让我们看看网上的各位大佬们怎么解释的。静态资源：一般客户端发送请求到web服务器，web服务器从内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。其实上面的总结已经很清晰了。静态资源就是直接存放在项目中的资源，这些资源不需要我们发送专门的请求进行获取。
vue的三种图片引入方式代码实例
10-15
主要介绍了vue的三种图片引入方式代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue3动态导入图片
最新发布
weixin_46664234的博客
06-13 778
vue3动态导入图片
vue中动态引入图片
不可云
02-29 3059
可以看出普通加载的图片会被编译成/img/img.13eb2ff7.jpeg这种路径，而动态加载的还是原始路径，这是因为webpack或vite，会将代码编译，最终在内容内构造出一个类似于打包后的dist文件，而就会将普通方式图片路径编译转化成dist文件夹下img文件夹下的资源。很多时间，不管是vue2，还是vue3开发中都会遇到，动态渲染图片的功能，但是为什么我们直接将图片的路径直接赋值给变量的时候，图片渲染不出来，而通过require引入加载图片后却能正常渲染呢？（以下代码为vue3，vue2一样）
vue动态引入图片
m0_68324632的博客
08-29 1万+
这篇文章主要介绍了关于vue图片路径的处理问题，在我们想要动态加载图片路径时，由于vue的打包原理不同，我们也有不同的处理图片路径方法，希望对大家有所帮助。如有错误或未考虑完全的地方，望各位斧正。...
vue引入图片路径的三种主要方法
热门推荐
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-16 2万+
1、在js代码里面 或者 html里面用"v-bind:"或":属性名"绑定路径的时候使用2、在css或者scss或者html里面的src中引入图片使用（注意如果是:src=后面用第1种方式引入路径）3、正常引入静态图片路径情况一，在html里面的用下面代码情况二，在scss里面的background-image:url(路径)用下面的，注意static前面多了/
vue.js中引入图片
qq_41662119的博客
12-17 893
vue.js中引入图片 vue中引入图片 前言：vue中引入图片时，会显示不出来，除非在css中引入。而在template中或者js动态引入时，会显示不出图片。 解决一 图片通过后端返回引入网络图片路径即可。 <div class="banner-item" :...
vue data引入本地图片的两种方式小结
10-16
本文将详细介绍两种在`data`属性中引入本地图片的方法，以便在模板中动态显示这些图片。 **方法一：使用`require()`** 在Vue组件的`data`函数中，可以使用`require()`动态引入本地图片。`require()`是CommonJS模块...
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
在Vue-cli3项目中动态引入图片时，常常会遇到图片资源无法被正确加载，浏览器显示404错误的情况。这个问题在项目中使用了动态路径来加载图片资源时尤为常见。本文将从以下几个方面深入探讨这个问题，并提供一个解决...
解决Vue动态加载本地图片问题
10-16
本文将详细讲解如何解决Vue中动态加载本地图片的问题，以及两种不同的实现方式。 首先，我们遇到的问题是当尝试使用`v-bind`（简写为`: `）动态绑定`img`标签的`src`属性时，图片无法正常显示。原因是浏览器没有...
基于vue 动态加载图片src的解决方法
08-28
这里有两种解决方法： 1. 将图片作为模块加载进去。例如：images:[{src:require('./1.png')},{src:require('./2.png')}],这样 webpack 就能将其解析。 2. 将图片放到 static 目录下，并写成绝对路径。例如：images:...
vue的图片引入方式
weixin_42213025的博客
05-17 2138
html<wv-swipe :height="250" :autoplay="4000" style="background: #f2f2f2"> <wv-swipe-item v-for="(items,index) in imgpngbox" :key="index"> <img :src="items.imgur
vue引入图片的方式
preserveXing的博客
06-01 9247
vue中有关图片引入的几种方式
vue中图片引入与使用几种方式
木昆灵寒酥的博客
05-14 1819
将编写代码时定义的路径转换为编译打包后的路径。
Vue 引入图片
2401_87546826的博客
11-04 2865
│ └── my-image.png 在 Vue 组件中访问图片（注意：这里使用的是相对路径，Webpack 会处理这些路径）： html 在构建后，这些资源会被处理并放在最终的 dist 目录中，但你不能直接通过浏览器访问 dist/assets 目录下的资源，因为它们是由 Webpack 打包的一部分。将图片放在 public 目录中 Vue CLI 创建的项目中有一个 public 文件夹，这个文件夹中的所有内容都会在构建时被复制到最终的 dist 目录中，并且可以直接通过根 URL 访问。
vue 引入图片
Kayson13的博客
04-09 194
<img :src="test" alt""> data() { return { test: '../../assets/test.png' } } 上面方式引入图片不会显示。 方法一： 改为用require： data() { return { test: require('../../assets/test.png') } } 方法二： import...
vue项目中如何引入图片
donghua201的博客
10-30 2900
require 是赋值过程，其实 require 的结果就是对象、数字、字符串、函数等，再把 require 的结果赋值给某个变量。import 是解构过程，但是目前所有的引擎都还没有实现 import，我们在 node 中使用 babel 支持。，也仅仅是将 ES6 转码为 ES5 再执行，在变量中使用require引入地址。直接将图片引入为模块使用。
动态加载图片
ha_ha_en的博客
06-01 3115
在前端，模块的引入默认是不支持全动态引入的（即：require(变量)），支持半动态引入（即：require(静态路径+动态变量路径)）今天有个需求是从后台查询出图片的相对路径，然后遍历写入到网页结构中实现图片的动态展示。3.require使用及注意事项。1.相对路径和绝对路径、根目录。2.vue页面加载图片的原理。
vue3动态引入本地图片地址
10-23
在Vue3中，动态引入本地图片地址通常通过`v-bind`指令结合`require.context`或`img`标签的`src`属性的动态绑定来实现。以下是两种常见的方法： 1. 使用`require.context`： ```html <template> <div> <img :src="getLocalImageSrc('path/to/image.jpg')"> </div> </template> <script setup> import { ref } from 'vue'; const images = require.context('@/assets/images', true, /\.jpg$/); const localImageSrc = ref(''); function getLocalImageSrc(filePath) { return images(filePath)?.default || ''; } </script> ``` 在这个例子中，`images`是一个上下文对象，可以获取到指定目录下所有`.jpg`文件的路径。`getLocalImageSrc`函数接收文件路径作为参数，返回实际的图片URL。 2. 直接使用`img`标签的动态绑定： ```html <template> <img :src="localImageSrc.value" /> </template> <script setup> import { ref } from 'vue'; const localImagePath = '/path/to/image.jpg'; // 本地图片路径 const localImageSrc = ref(`file://${localImagePath}`); </script> ``` 这里直接将本地路径转换为`data:` URL格式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值