在vue中的js部分导入图片后通过webpack无法被正确打包的问题

最新推荐文章于 2025-09-22 10:45:23 发布
原创 最新推荐文章于 2025-09-22 10:45:23 发布 · 4k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue-js

本文详细介绍了在Vue项目中如何正确地导入图片资源。强调了使用require进行图片导入的重要性，以确保图片能被正确打包到最终的项目文件中。此外还讨论了不同场景下图片导入的具体方法。

具体描述

  • 在vue组件的js部分导入图片要使用require的形式导入，否则webpack不能正常导入，因为其路径不符合其解析规范

原因

  1. 在引入图片的时候的地址数据的时候需要使用require来讲图片作为模块引入，这样才会被webpack正确的打包的项目文件中，否则会因为webpack根据依赖打包而找不到指定的图片

  2. 如果是在HTML中的img中通过v-bind引入引入图片,src为对应的数据变量的话也是需要使用require来将图片作为模块引入才会被webpack正常打包

  3. 在HTML中直接书写的img地址以及css中引入的图片地址无需使用其他手段正常引用即可被webpack正常打包

vue 项目打包图片没有打包进去问题解决
jiangjunyuan168的博客
02-24 3964
vue 项目打包，项目中引用了的图片没有被打进包里，导致打包后的项目图片缺失。
关于Vue3(Vue-cli3)打包以及打包之后显示空白和图片不显示的问题
weixin_46285310的博客
08-08 4048
今天进行打包之后遇到一个问题就是，打包上传到服务器里面，图片不显示，之后查了一下，最新的vue3里是这么进行配置的 打包： Vue项目创建好之后，右键在新终端中打开，注意一定要在项目的根目录里，输入npm run build 进行打包，等打包好之后，类似这样 左侧项目目录会出现一个dist文件夹，这就是你打包好之后的文件夹 当然你可以修改它的名称上传到服务器里进行访问，这就是打包 关于上传到服务器里显示空白和图片不显示怎么去做 网上大多都是有关于vue2及以下版本的配置，在build文.
vue文件style中设置背景文件打包后不生效问题
若晨工作室
07-28 1627
在vue项目中当需要在vue文件中的style里引入背景图片时，dev环境正常显示，build以后文件布到服务器上打开发现背景图不生效。 查看控制台发现这个样式的背景图引入路径错了。 解决办法是在打包配置的build文件夹中找到utils.js文件，在该文件中找到vue-style-loader配置的部分加上publicPath: '../../' 重新打包后放到服务器上测试，发现背景图片引入路径就正确了✌✌ ✌ 大功告成！ 参考文章：https://segmentf...
在vue2中有公共的图片js文件，把所有的图片都导入到这个文件中，在其他的vue文件中如何引用。
最新发布
u010782109的博客
09-22 262
本文介绍了在Vue2项目中集中管理图片资源的方法。针对图片分散导致的维护困难，提出创建公共JS文件（如assets/images.js）作为图片资源中心，通过Webpack的require或ES6的import批量导入图片并导出对象供全局调用。详细展示了实现步骤：1）定义图片资源中心文件；2）组件中引入并使用；3）模板中绑定图片路径。还提供了高级优化技巧，包括动态加载图片和自动扫描目录生成映射表，实现更灵活的资源管理。该方法有效解决了硬编码路径和重复代码问题，提高了项目可维护性。
vite+vue3项目打包后图片不显示或者请求路径多了一个undefined
lotpyve的博客
01-24 5474
这里表示我们的 .env.development 文件，在打包的时候是不会被构建进去的，所以当我们打包后，.env.development 里面用到的路径就出错了。但是如果我们是把项目打包，然后在掉到 express 服务器里面去时，我们会发现，只显示了一张图片，另外一张图片的地址前面是 undefined。我们先来看一个简单的例子，我已经事先在本地构建了一个 express 服务器，端口是 3000，images 里面是有文件资源的，这是代码。
解决vue-cli中webpack无法打包js变量中的图片路径
遛狗的代码的博客
03-12 3253
首先，我们先来重现一下问题，如果直接通过路径的形式引入一个图片，例如：<template> <div id="app"> <img src="./assets/demo.jpg"> <!--<img :src="demo">--> <HelloWorld/&gt
vue 配置文件不打包
yang28242687的博客
12-17 5062
1、vue-cli3之后要加载本地js资源，可以将js文件放在public文件下，即与index.html文件同级（可以创文件夹放文件夹中，比较规范） 2、在index文件中引入（注意一定要写入body标签内，不能写在头文件中） 注意一定要写入body标签内，不能写在头文件中 注意一定要写入body标签内，不能写在头文件中 注意一定要写入body标签内，不能写在头文件中 否则读不到 这里要注意两种写法，这两种引入在本地都是可以正常加载到文件，但是打包之后，第一种写法会因为路径错误404，.
解决vue+webpack打包路径的问题
11-27
总的来说，解决Vue+Webpack打包路径问题的关键在于理解Vue Router的`history`模式和Webpack的`publicPath`配置，以及如何适配服务器以支持这种模式。正确配置后，你就可以在自定义的路径下顺利部署和运行Vue应用了。
Vue实战指南：Vue打包优化，Webpack的八大配置方案
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-15 2286
此时，合理的配置不仅能够提高开发效率，还能在不影响用户体验的前提下进行频繁的更新。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过为输出文件添加哈希值，使得浏览器能够缓存这些文件，在没有变化的情况下，用户再次访问时可以直接从缓存加载。通过懒加载模块，即在需要时才加载代码，而不是一开始就加载所有代码，可以有效减少初始加载时间。在生产环境下，应该启用Webpack的各种优化特性，以确保输出的代码是经过充分压缩和优化的。，为我们广大开发同胞谋福祉，
electron-vue利用webpack打包实现多页面的入口文件问题
10-17
`electron-vue` 是一个预配置的 `Vue.js` 和 `Electron` 开发环境，它整合了 `vue-cli` 和 `webpack` 配置，使得在 Electron 中使用 Vue.js 更加方便。 **1. Webpack 的核心概念** 在深入讨论多页面配置之前，我们...
webpack + vue 打包生成公共配置文件（域名） 方便动态修改
10-16
首先，我们需要安装`generate-asset-webpack-plugin`插件，该插件用于在webpack打包过程中生成资产文件。在项目的根目录下运行以下命令： ```bash npm install --save-dev generate-asset-webpack-plugin ``` ####...
Vue实战指南：查看Vue项目Webpack打包结果中的文件大小
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-19 1864
特别是在Vue.js项目中，随着功能的增加，如果不加以控制，最终打包出的文件大小可能会变得非常庞大，从而影响用户的加载速度和整体体验。Webpack是一个模块打包工具，它负责将各种资源（如JavaScript、CSS、图片等）按照一定的规则进行处理和打包，最终输出浏览器可以识别的静态文件。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。在持续集成环境中，可以设置规则来监控文件大小的变化，一旦文件大小超过某个阈值，则构建失败。专栏系列（点击解锁）
[随手记]vue项目动态生成的img地址信息，webpack无法打包问题
tom_wong666
02-27 380
但是，webpack不会对动态生成的资源地址打包 解决方法：自己手工加载动态资源 注意点：Webpack资源打包时的特点 只会对源代码中出现的静态资源进行打包 import ‘…/assets/css/base.css’ 但是，webpack不会对动态生成的资源地址打包 解决方法：自己手工加载动态资源 只会对源代码中出现的静态资源进行打包 import ‘…/assets/css/...
vue项目的.png图片无法打包
weixin_42601134的博客
01-18 254
Vue项目中图片无法打包可能是由以下几种原因造成的： 图片路径配置错误，请检查图片路径是否正确。 没有安装相关的图片加载器，请检查是否安装了 file-loader 或者 url-loader。 图片格式不支持，请检查图片是否为 png 格式。 打包配置文件有误，请检查 webpack 配置文件是否配置了图片加载器。 如果仍然无法解决问题，建议提供更详细的代码和配置文件以便更准确的定位问题。 ...
vue打包项目 本地图片有个别图片未显示出来
Mr_wuying的博客
06-03 2885
vue打包 会自动把图片转换成base64 这样的图片会显示正常 如果没有显示正常说明图片路径有问题 这里说的是 图片路径没问题却有个别图片没有显示 那是因为本地的个别图片没有转换成base64 如果是请求的网路图片是不会转换的 请求网络图片都会显示正常 因为打包的时候 图片太大不会转换base64 因为会加大负担 这里如果是本地图片不正常 就要改变webpack 打包的文件代码 build 文件中的webpack.base.conf.js 文件 module: { rules:
vue3非打包直接用的配置
大赚万万亿
04-25 1557
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>演示例子</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.31/vue.global.prod.min.js"></script> </head> <body> &l.
vue-webpack打包后图片找不到
momDIY的博客
03-22 3256
一、问题描述 项目在使用webpack打包后，很常见的一个问题就是dev环境可见的图片在打包之后找不到文件。 二、异常原因 1.图片未被打包 当使用的图片url是动态拼接的，可能会出现webpack没有检测到该图片被引用的问题，所以打包后图片因为不存在而找不到。 2.图片路径错误 当一个图片被多次引用，当使用的是动态拼接为打包前图片存放的路径会找不到图片，因为打包时会把动态生成的路径直接存下来，不...
解决动态引入图片打包后无法显示的问题
qq_52222760的博客
06-19 1063
图片动态绑定。开发时可以正常显示，打包后无法显示。
VUE项目 打包时关于svg报错问题解决办法
weixin_44288627的博客
12-27 6113
今天使用build打包vue项目的时候疯狂报错，报错信息如下： building for production...Error processing file: static/css/app.316977a049dccd7ae4089d9226e81a34.css (node:11888) UnhandledPromiseRejectionWarning: postcss-svgo: Error ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值