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

最新推荐文章于 2024-07-23 15:20:14 发布
最新推荐文章于 2024-07-23 15:20:14 发布
阅读量3.9k 收藏 3
点赞数 1
分类专栏： 2017年12月 归档 Vue 文章标签： vue-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_37533433/article/details/78937645
版权
Vue 同时被 3 个专栏收录
5 篇文章 0 订阅
订阅专栏
归档
4 篇文章 0 订阅
订阅专栏
2017年12月
3 篇文章 0 订阅
订阅专栏

具体描述

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

原因

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

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

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

RotatingBlock
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于Vue3(Vue-cli3)打包以及打包之后显示空白和图片不显示的问题
weixin_46285310的博客
08-08 3808
今天进行打包之后遇到一个问题就是，打包上传到服务器里面，图片不显示，之后查了一下，最新的vue3里是这么进行配置的 打包： Vue项目创建好之后，右键在新终端中打开，注意一定要在项目的根目录里，输入npm run build 进行打包，等打包好之后，类似这样 左侧项目目录会出现一个dist文件夹，这就是你打包好之后的文件夹 当然你可以修改它的名称上传到服务器里进行访问，这就是打包 关于上传到服务器里显示空白和图片不显示怎么去做 网上大多都是有关于vue2及以下版本的配置，在build文.
使用yarn build 打包vue项目时静态文件或图片未打包成功
weixin_45626288的博客
08-24 1437
使用yarn build 打包vue项目时静态文件或图片未打包成功
vue中动态引入图片为什么要是require， 你不知道的那些事
最新发布
2401_83384536的博客
07-23 916
与静态资源相对应的还有一个动态资源，先让我们看看网上的各位大佬们怎么解释的。静态资源：一般客户端发送请求到web服务器，web服务器从内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。其实上面的总结已经很清晰了。
vue 项目打包图片没有打包进去问题解决
jiangjunyuan168的博客
02-24 2313
vue 项目打包，项目中引用了的图片没有被打进包里，导致打包后的项目图片缺失。
vue 配置文件不打包
yang28242687的博客
12-17 4840
1、vue-cli3之后要加载本地js资源，可以将js文件放在public文件下，即与index.html文件同级（可以创文件夹放文件夹中，比较规范） 2、在index文件中引入（注意一定要写入body标签内，不能写在头文件中） 注意一定要写入body标签内，不能写在头文件中 注意一定要写入body标签内，不能写在头文件中 注意一定要写入body标签内，不能写在头文件中 否则读不到 这里要注意两种写法，这两种引入在本地都是可以正常加载到文件，但是打包之后，第一种写法会因为路径错误404，.
[随手记]vue项目动态生成的img地址信息，webpack无法打包问题
tom_wong666
02-27 326
但是，webpack不会对动态生成的资源地址打包 解决方法：自己手工加载动态资源 注意点：Webpack资源打包时的特点 只会对源代码中出现的静态资源进行打包 import ‘…/assets/css/base.css’ 但是，webpack不会对动态生成的资源地址打包 解决方法：自己手工加载动态资源 只会对源代码中出现的静态资源进行打包 import ‘…/assets/css/...
vue项目的.png图片无法打包
weixin_42601134的博客
01-18 159
Vue项目中图片无法打包可能是由以下几种原因造成的： 图片路径配置错误，请检查图片路径是否正确。 没有安装相关的图片加载器，请检查是否安装了 file-loader 或者 url-loader。 图片格式不支持，请检查图片是否为 png 格式。 打包配置文件有误，请检查 webpack 配置文件是否配置了图片加载器。 如果仍然无法解决问题，建议提供更详细的代码和配置文件以便更准确的定位问题。 ...
解决vue+webpack打包路径的问题
11-27
总的来说，解决Vue+Webpack打包路径问题的关键在于理解Vue Router的`history`模式和Webpack的`publicPath`配置，以及如何适配服务器以支持这种模式。正确配置后，你就可以在自定义的路径下顺利部署和运行Vue应用了。
vue+webpack支持多页面打包
01-06
在现代前端开发中，Vue.js 是一款非常流行的轻量级渐进式框架，而Webpack 则是强大的模块打包工具。当两者结合时，可以构建出高效、可维护的前端项目。"vue+webpack 结构，支持多页面打包"这个主题，意味着我们将...
electron-vue利用webpack打包实现多页面的入口文件问题
10-17
`electron-vue` 是一个预配置的 `Vue.js` 和 `Electron` 开发环境，它整合了 `vue-cli` 和 `webpack` 配置，使得在 Electron 中使用 Vue.js 更加方便。 **1. Webpack 的核心概念** 在深入讨论多页面配置之前，我们...
vue--webpack打包
qq_46316038的博客
12-29 1457
前言：webpack（很难，没有一定的vue基础，勿学） 一，定义：js模块打包器把所有依赖的文件生成一个图，打包成文件 二，安装： 1.npm init -y初始化项目 2.npm i webpack webpack-cli -D安装 三，配置文件webpack.config.js module.exports = {} 四，核心概念 ...
vue打包项目 本地图片有个别图片未显示出来
Mr_wuying的博客
06-03 2755
vue打包 会自动把图片转换成base64 这样的图片会显示正常 如果没有显示正常说明图片路径有问题 这里说的是 图片路径没问题却有个别图片没有显示 那是因为本地的个别图片没有转换成base64 如果是请求的网路图片是不会转换的 请求网络图片都会显示正常 因为打包的时候 图片太大不会转换base64 因为会加大负担 这里如果是本地图片不正常 就要改变webpack 打包的文件代码 build 文件中的webpack.base.conf.js 文件 module: { rules:
解决vue-cli中webpack无法打包js变量中的图片路径
遛狗的代码的博客
03-12 3004
首先，我们先来重现一下问题，如果直接通过路径的形式引入一个图片，例如：<template> <div id="app"> <img src="./assets/demo.jpg"> <!--<img :src="demo">--> <HelloWorld/&gt
vue3非打包直接用的配置
大赚万万亿
04-25 1347
<!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 3044
一、问题描述 项目在使用webpack打包后，很常见的一个问题就是dev环境可见的图片在打包之后找不到文件。 二、异常原因 1.图片未被打包 当使用的图片url是动态拼接的，可能会出现webpack没有检测到该图片被引用的问题，所以打包后图片因为不存在而找不到。 2.图片路径错误 当一个图片被多次引用，当使用的是动态拼接为打包前图片存放的路径会找不到图片，因为打包时会把动态生成的路径直接存下来，不...
vue文件style中设置背景文件打包后不生效问题
若晨工作室
07-28 1506
在vue项目中当需要在vue文件中的style里引入背景图片时，dev环境正常显示，build以后文件布到服务器上打开发现背景图不生效。 查看控制台发现这个样式的背景图引入路径错了。 解决办法是在打包配置的build文件夹中找到utils.js文件，在该文件中找到vue-style-loader配置的部分加上publicPath: '../../' 重新打包后放到服务器上测试，发现背景图片引入路径就正确了✌✌ ✌ 大功告成！ 参考文章：https://segmentf...
解决动态引入图片打包后无法显示的问题
qq_52222760的博客
06-19 776
图片动态绑定。开发时可以正常显示，打包后无法显示。
VUE项目 打包时关于svg报错问题解决办法
weixin_44288627的博客
12-27 5859
今天使用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、付费专栏及课程。

余额充值