VUE引入图片

勿喷:这个网上教程很多,但是上次找的教程前几个的内容都一样,但是方法没有写全

导致使用的时候一直报错,自己记录一下常用的

<template>
    <div class="sched_content">

        <img :src="imgU1">
                    
    </div>
</template>
<script>
import imgU1 from '@/assets/images/list1.png'
export default {
    data() {
        return {
            imgU1,
            
        }
    },
}
</script>

### 如何在 Vue 中实现批量引入图片并动态引用 #### 使用 Webpack 的 `require.context` 方法 在 Vue CLI 或其他基于 Webpack 的构建工具中,可以利用 `require.context` 来批量引入图片资源。这种方法允许开发者通过指定目录和正则表达式匹配文件名来一次性加载多个图片文件。 以下是具体的实现方式: ```javascript const requireContext = require.context('@/assets/images/', true, /\.(png|jpg|jpeg|gif)$/); const images = {}; requireContext.keys().forEach((item) => { images[item.replace(/^.+\//, '')] = requireContext(item); // 将图片路径映射到对象属性上 }); ``` 这段代码的作用是从 `@/assets/images/` 文件夹及其子文件夹中查找所有扩展名为 `.png`, `.jpg`, `.jpeg`, 或 `.gif` 的图片文件,并将其存储在一个 JavaScript 对象中[^4]。 --- #### 在 Vue 3 中使用 Vite 进行动态图片引入 如果项目使用的是 Vue 3 和 Vite 构建工具,则可以通过 `import.meta.glob` 动态导入图片资源。这种方式更加简洁高效,适用于现代前端开发环境。 以下是一个示例代码片段: ```javascript const imageMap = import.meta.glob('@/assets/images/**/*.{png,jpg,jpeg,gif}', { eager: true }); const images = Object.fromEntries( Object.entries(imageMap).map(([key, value]) => [ key.match(/\/([^/]+?)(\.\w+)?$/)[1], // 提取文件名作为键 value.default || value, ]) ); ``` 这里的关键在于 `import.meta.glob` 可以扫描指定路径下的所有符合条件的文件,并返回一个对象。设置 `{ eager: true }` 参数可以让这些文件立即被解析为实际的内容而不是懒加载模块[^2]。 --- #### 处理 SVG 图片的统一导入 对于 SVG 类型的标或其他矢量形,在 Vue 项目中也可以采用类似的批量导入策略。例如,下面展示了一种常见的做法——将 SVG 组件注册为全局组件以便于复用。 ```javascript import Vue from 'vue'; import SvgIcon from '@/components/SvgIcon.vue'; // 自定义的 SVG 渲染组件 Vue.component('svg-icon', SvgIcon); const req = require.context('./icons', false, /\.svg$/); req.keys().forEach(iconPath => { const iconName = iconPath.split('/').pop().replace(/\..+$/, ''); req(iconPath); // 加载每个单独的 SVG 文件 }); ``` 该脚本会自动读取 `./icons` 目录内的所有 `.svg` 文件并将它们逐一加载[^5]。 --- #### 解决常见问题:Webpack 下无法正常引用图片 当尝试直接通过字符串拼接的方式来引用图片时可能会遇到错误提示,这是因为 Webpack 默认不会处理未声明的外部依赖项。解决办法之一是在入口 JS 文件或者插件配置阶段显式告知编译器哪些类型的资产需要被打包进去[^3]。 一种推荐的做法是修改项目的 `webpack.config.js` 添加额外规则支持更多媒体格式: ```javascript module.exports = { module: { rules: [ { test: /\.(png|jpe?g|gif|webp)$/, type: 'asset/resource', generator: { filename: 'images/[name].[hash][ext]' } }, { test: /\.svg$/, use: ['babel-loader', '@svgr/webpack'] } ] } }; ``` 以上配置确保了各种像能够按照预期参与打包流程。 --- ### 总结 无论是传统 Webpack 方案还是现代化框架搭配 Vite 工具链,均提供了灵活多样的手段帮助我们完成对大量静态素材的有效管理和便捷调用。具体选择取决于当前工程的技术栈以及个人偏好等因素影响。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值