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

最新推荐文章于 2024-02-24 15:25:12 发布
最新推荐文章于 2024-02-24 15:25:12 发布
阅读量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正常打包

关于Vue3(Vue-cli3)打包以及打包之后显示空白和图片不显示的问题
weixin_46285310的博客
08-08 3871
今天进行打包之后遇到一个问题就是，打包上传到服务器里面，图片不显示，之后查了一下，最新的vue3里是这么进行配置的 打包： Vue项目创建好之后，右键在新终端中打开，注意一定要在项目的根目录里，输入npm run build 进行打包，等打包好之后，类似这样 左侧项目目录会出现一个dist文件夹，这就是你打包好之后的文件夹 当然你可以修改它的名称上传到服务器里进行访问，这就是打包 关于上传到服务器里显示空白和图片不显示怎么去做 网上大多都是有关于vue2及以下版本的配置，在build文.
vue--webpack打包
qq_46316038的博客
12-29 1475
前言：webpack（很难，没有一定的vue基础，勿学） 一，定义：js模块打包器把所有依赖的文件生成一个图，打包成文件 二，安装： 1.npm init -y初始化项目 2.npm i webpack webpack-cli -D安装 三，配置文件webpack.config.js module.exports = {} 四，核心概念 ...
vue 项目打包图片没有打包进去问题解决
最新发布
jiangjunyuan168的博客
02-24 2746
vue 项目打包，项目中引用了的图片没有被打进包里，导致打包后的项目图片缺失。
vue 配置文件不打包
yang28242687的博客
12-17 4915
1、vue-cli3之后要加载本地js资源，可以将js文件放在public文件下，即与index.html文件同级（可以创文件夹放文件夹中，比较规范） 2、在index文件中引入（注意一定要写入body标签内，不能写在头文件中） 注意一定要写入body标签内，不能写在头文件中 注意一定要写入body标签内，不能写在头文件中 注意一定要写入body标签内，不能写在头文件中 否则读不到 这里要注意两种写法，这两种引入在本地都是可以正常加载到文件，但是打包之后，第一种写法会因为路径错误404，.
[随手记]vue项目动态生成的img地址信息，webpack无法打包问题
tom_wong666
02-27 345
但是，webpack不会对动态生成的资源地址打包 解决方法：自己手工加载动态资源 注意点：Webpack资源打包时的特点 只会对源代码中出现的静态资源进行打包 import ‘…/assets/css/base.css’ 但是，webpack不会对动态生成的资源地址打包 解决方法：自己手工加载动态资源 只会对源代码中出现的静态资源进行打包 import ‘…/assets/css/...
vue项目的.png图片无法打包
weixin_42601134的博客
01-18 171
Vue项目中图片无法打包可能是由以下几种原因造成的： 图片路径配置错误，请检查图片路径是否正确。 没有安装相关的图片加载器，请检查是否安装了 file-loader 或者 url-loader。 图片格式不支持，请检查图片是否为 png 格式。 打包配置文件有误，请检查 webpack 配置文件是否配置了图片加载器。 如果仍然无法解决问题，建议提供更详细的代码和配置文件以便更准确的定位问题。 ...
解决vue+webpack打包路径的问题
11-27
总的来说，解决Vue+Webpack打包路径问题的关键在于理解Vue Router的`history`模式和Webpack的`publicPath`配置，以及如何适配服务器以支持这种模式。正确配置后，你就可以在自定义的路径下顺利部署和运行Vue应用了。
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打包项目 本地图片有个别图片未显示出来
Mr_wuying的博客
06-03 2783
vue打包 会自动把图片转换成base64 这样的图片会显示正常 如果没有显示正常说明图片路径有问题 这里说的是 图片路径没问题却有个别图片没有显示 那是因为本地的个别图片没有转换成base64 如果是请求的网路图片是不会转换的 请求网络图片都会显示正常 因为打包的时候 图片太大不会转换base64 因为会加大负担 这里如果是本地图片不正常 就要改变webpack 打包的文件代码 build 文件中的webpack.base.conf.js 文件 module: { rules:
解决vue-cli中webpack无法打包js变量中的图片路径
遛狗的代码的博客
03-12 3102
首先，我们先来重现一下问题，如果直接通过路径的形式引入一个图片，例如：<template> <div id="app"> <img src="./assets/demo.jpg"> <!--<img :src="demo">--> <HelloWorld/&gt
vue3非打包直接用的配置
大赚万万亿
04-25 1406
<!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 3086
一、问题描述 项目在使用webpack打包后，很常见的一个问题就是dev环境可见的图片在打包之后找不到文件。 二、异常原因 1.图片未被打包 当使用的图片url是动态拼接的，可能会出现webpack没有检测到该图片被引用的问题，所以打包后图片因为不存在而找不到。 2.图片路径错误 当一个图片被多次引用，当使用的是动态拼接为打包前图片存放的路径会找不到图片，因为打包时会把动态生成的路径直接存下来，不...
vue文件style中设置背景文件打包后不生效问题
若晨工作室
07-28 1530
在vue项目中当需要在vue文件中的style里引入背景图片时，dev环境正常显示，build以后文件布到服务器上打开发现背景图不生效。 查看控制台发现这个样式的背景图引入路径错了。 解决办法是在打包配置的build文件夹中找到utils.js文件，在该文件中找到vue-style-loader配置的部分加上publicPath: '../../' 重新打包后放到服务器上测试，发现背景图片引入路径就正确了✌✌ ✌ 大功告成！ 参考文章：https://segmentf...
解决动态引入图片打包后无法显示的问题
qq_52222760的博客
06-19 840
图片动态绑定。开发时可以正常显示，打包后无法显示。
VUE项目 打包时关于svg报错问题解决办法
weixin_44288627的博客
12-27 5907
今天使用build打包vue项目的时候疯狂报错，报错信息如下： building for production...Error processing file: static/css/app.316977a049dccd7ae4089d9226e81a34.css (node:11888) UnhandledPromiseRejectionWarning: postcss-svgo: Error ...
在vue项目中引入静态资源（不需要打包）
Serena_tz的博客
04-16 2003
在用vue构建项目时，我们经常要引用不需要打包的静态资源，比如说图片，我们可以放在入口文件index.html当前目录下的static文件夹中，引入的路径为./static/images/test.png。
webpack4下url-loader打包图片问题
dianai7709的博客
07-25 912
webpack.condig.js: const path = require('path'); //导入插件 const VueLoaderPlugin = require('vue-loader/lib/plugin');//加这句是为了避免报错：Module Error (from ./node_modules/vue-loader/lib/index.js...
vue打包：使用image-webpack-loader优化图片压缩
在Vue项目中，由于图片文件通常会占据打包后的体积大头，导致应用下载速度变慢，用户体验下降。为了优化这种情况，可以采用image-webpack-loader插件对图片进行压缩。以下是具体的操作步骤和配置方法。 首先，你...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值