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

关于Vue3(Vue-cli3)打包以及打包之后显示空白和图片不显示的问题 今天进行打包之后遇到一个问题就是,打包上传到服务器里面,图片不显示,之后查了一下,最新的vue3里是这么进行配置的 打包: Vue项目创建好之后,右键在新终端中打开,注意一定要在项目的根目录里,输入npm run build 进行打包,等打包好之后,类似这样 左侧项目目录会出现一个dist文件夹,这就是你打包好之后的文件夹 当然你可以修改它的名称上传到服务器里进行访问,这就是打包 关于上传到服务器里显示空白和图片不显示怎么去做 网上大多都是有关于vue2及以下版本的配置,在build文. 阅读详情

具体描述

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

原因

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

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

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

vue 项目打包图片没有打包进去问题解决 vue 项目打包,项目中引用了的图片没有被打进包里,导致打包后的项目图片缺失。 阅读详情

相关推荐

webpack2打包vue与Boostrap并进行多页面打包以及公共js部分的提取

webpack2打包配置文件说明,常见的loader模块加载器以及plugin插件部分的介绍,vue配合bootstrap搭建前端项目demo讲解

u012115763的专栏 5958

vite 结合vue3.0 打包报错

【代码】vite 结合vue3.0 打包报错。

qq_24343389的博客 1571

Silvaco TCAD 2018安装后,如何配置TonyPlot 5.0.22.R并解决绘图报错?

本文详细介绍了在Windows系统上安装Silvaco TCAD 2018后,如何正确配置TonyPlot 5.0.22.R并解决常见的绘图报错问题。内容包括版本兼容性分析、环境变量设置、常见错误解决方案以及性能优化建议,帮助用户顺利完成仿真结果的可视化工作。

weixin_31031711的博客 424

vue打包项目 本地图片有个别图片未显示出来

vue打包 会自动把图片转换成base64 这样的图片会显示正常 如果没有显示正常说明图片路径有问题 这里说的是 图片路径没问题却有个别图片没有显示 那是因为本地的个别图片没有转换成base64 如果是请求的网路图片是不会转换的 请求网络图片都会显示正常 因为打包的时候 图片太大不会转换base64 因为会加大负担 这里如果是本地图片不正常 就要改变webpack 打包的文件代码 build 文件中的webpack.base.conf.js 文件 module: { rules:

Mr_wuying的博客 2923

NHANES更新数据后,权重计算方式也更新了

官网说明在此:如果你比我还懒,我下载了几个说明文件。2021年8月至2023年8月的总样本量与之前的2年周期相似。然而,。特别是,与之前包括过度抽样的周期相比,非西班牙裔白人的样本量较高,而非西班牙裔黑人的样本量较低。此外,60岁及以上人群的样本量较高,而年轻群体的样本量较低。子组的估计值可能具有较低的精确度,因此,检测组间差异的统计能力可能较低。此外,年龄和种族/西班牙裔亚组(尤其是儿童和青少年年龄组)的估计值可能会显示意想不到的模式。

珏世佳人的博客 2411

【2025CVPR】基于脉冲神经网络的能效目标检测模型:Multi-scale Spiking Detector(MSD)深度解析

本文提出了一种创新的多尺度脉冲神经网络目标检测器(MSD),通过生物启发的ONNB模块和MSDF框架实现了高效准确的目标检测。该模型采用端到端直接训练策略,在COCO数据集上达到62.0%mAP的精度,同时仅需7.8M参数和6.43mJ能耗,较传统方法提升2.8%精度并降低82.9%能耗。实验验证了其在小目标检测和事件数据处理的优越性,为边缘计算应用提供了新范式。

hasakie的博客 1109

vite+vue3项目打包后图片不显示或者请求路径多了一个undefined

这里表示我们的 .env.development 文件,在打包的时候是不会被构建进去的,所以当我们打包后,.env.development 里面用到的路径就出错了。但是如果我们是把项目打包,然后在掉到 express 服务器里面去时,我们会发现,只显示了一张图片,另外一张图片的地址前面是 undefined。我们先来看一个简单的例子,我已经事先在本地构建了一个 express 服务器,端口是 3000,images 里面是有文件资源的,这是代码。

lotpyve的博客 5539

ADF4002分频器避坑指南:常见配置错误及解决方案

本文深入解析了ADF4002分频器在实战应用中的常见陷阱与解决方案。内容涵盖寄存器配置逻辑、硬件PCB布局要点、软件驱动时序细节及系统化调试方法,重点阐述了如何避免因配置错误导致芯片无法正常工作的问题,帮助工程师高效完成高精度频率合成系统设计。

weixin_29192141的博客 96

使用webpack打包vue项目

使用webpack打包vue项目 安装webpack工具,安装方式有两种:全局安装(命令:npm install -g webpack webpack-cli)以及安装在项目中,这里使用第二种: //在项目中安装,这里的-D表示运用到开发(development)环境 npm install -D webpack webpack-cli 在项目根目录新建一个webpack.config.js文件,配置打包时候需要的一些插件。**作用: 指示 webpack 干那些活(当你运行 webpack 指令

qq_42750982的博客 1万+

matlab 基于离散余弦变换DCT的最小二乘相位解缠

最小范数法是寻求在解包裹相位的局部微分与包裹相位微分相一致的条件下, 逼近于真实相位分布的解包裹相位分布。目标是使解包裹相位与包裹相位曲面的差最小

点云侠的博客 285

AgentScope Java 入门:Spring AI Alibaba 与 AgentScope 的定位与区别

摘要:Spring AI Alibaba是阿里基于Spring AI开发的本地化AI应用框架,旨在服务Java开发者。它提供模型接入、函数调用、RAG等功能,并与阿里云基础设施深度集成。同时,阿里开源了多智能体框架AgentScope,其Java版(AgentScope-Java)专注于Agentic设计理念。两者将协同发展:Spring AI Alibaba侧重Spring生态集成,AgentScope-Java强化智能体能力。未来计划包括支持AgentScope、升级Admin平台,以及推进Server

SmartSi 1546

[Node] Node.js Webpack打包图片-Js-Vue

Node.js 初级知识Webpack打包图片-Js-Vue 使用MD4的散列函数处理,生成一个128位的hash值(32个十六进制)开发中 我们想要使用ES6+的语法 想要使用TS 开发React项目 它们都离不开babel的。在import/require中给定的相对路径 会拼接此上下文路径,来生成模块的绝对路径。当我们项目的目录结构比较深的时 或者一个文件的路径可能需要../../../这种路径片段。开发中 会有各种各样的模块依赖,这些模块可能来自于自己编写的代码,也可能来自于第三方库。

CoderHing的博客~ 3678

AI Agent驱动的多模态情感分析方法:从BERT到Vision Transformer的探索

情感分析(Sentiment Analysis)是自然语言处理(NLP)与计算机视觉(CV)中一项重要任务。传统的情感分析主要依赖于文本数据,但在现实应用中,情感往往通过 语言、语音、表情、姿态 等多模态信号共同传达。因此,结合 多模态深度学习 的 AI Agent 在情感理解中具有广阔的前景。

一键难忘的博客 739

解决vue-cli中webpack无法打包js变量中的图片路径

首先,我们先来重现一下问题,如果直接通过路径的形式引入一个图片,例如:<template> <div id="app"> <img src="./assets/demo.jpg"> <!--<img :src="demo">--> <HelloWorld/&gt

遛狗的代码的博客 3314

从扩散到流匹配:具身智能中的生成模型原理与实现细节(具身智能/VLA/机器人面试常考)

本文探讨了生成模型在具身智能中的应用,重点对比了扩散模型和流匹配(Flow Matching)两种方法。扩散模型通过逐步加噪和去噪过程学习数据分布,建模能力强但采样速度慢;而Flow Matching直接学习连续向量场,更适合实时轨迹规划等需要快速连续生成的任务。文章还分析了自注意力机制的优势、ROS1/ROS2通信架构差异,并提供了Flow Matching的PyTorch实现代码。这些生成模型使机器人系统能够处理不确定性、多模态信息和连续控制问题,从传统的确定解转向更灵活的分布建模范式。

m0_51738372的博客 236

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

学习Webpack中图片-JS-Vue-plugin

打包图片、js、vue,学习webpack插件

qq_45730399的博客 2356

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

vue 使用webpack打包图片,GZIP打包js和css压缩

vue 使用webpack打包图片,GZIP打包js和css压缩 1.打包压缩图片 ① 输入命令安装file-loader npm i -D file-loader ② 在webpack.config.js中的rules数组中添加file-loader的相关配置 require("image-webpack-loader") { test: /\.(png|jpe?g|gi...

这里是简介 2922

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain&#39;s apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath(&#39;DeepLearnToolbox&#39;));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand(&#39;state&#39;,0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W&#39;); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand(&#39;state&#39;,0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = &#39;sigm&#39;;%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, &#39;Too big error&#39;);```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand(&#39;state&#39;,0)sae = saesetup([784 100]);sae.ae{1}.activation_function = &#39;sigm&#39;;sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)&#39;)% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;;nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, &#39;Too big error&#39;);```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x&#39;,28,28,60000))/255;test_x = double(reshape(test_x&#39;,28,28,10000))/255;train_y = double(train_y&#39;);test_y = double(test_y&#39;);%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you&#39;ll get around 1.2% errorrand(&#39;state&#39;,0)cnn.layers = { struct(&#39;type&#39;, &#39;i&#39;) %input layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 6, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %sub sampling layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 12, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, &#39;Too big error&#39;);```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, &#39;Too big error&#39;);%% ex2 neural net with L2 weight decayrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex3 neural net with dropoutrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex4 neural net with sigmoid activation functionrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex5 plotting functionalityrand(&#39;state&#39;,0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = &#39;softmax&#39;; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand(&#39;state&#39;,0)nn = nnsetup([784 20 10]); nn.output = &#39;softmax&#39;; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

Webpack打包图片-JS-Vue文件

介绍了webpack如何打包图片等静态资源、如何使用label打包js、如何打包vue文件,最后介绍了在webpack中如何配置扩展名和别名。

凉茶铺的博客 4073

vue webpack打包后图片不显示问题以及路由页面无法显示问题

我把项目打包后,放到服务器上 ,发现图片什么的都加不出来, 网上说的修改config文件夹下的index.js里的 改为 "./” 我之前早就该过了,没用, 后来又看到一篇博客, 还要修改build文件夹下的utils.js 在里面添加: 参考博客:https://blog.youkuaiyun.com/rainbow8300/article/details/83010507 ...

weixin_43840538的博客 1620

vue webpack打包后图片、js、css路径错误的完美解决方法

项目用rundevbuild打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css、js等资源,路径都是绝对的。

weixin_56242672的博客 5154

Vue.js- webpack 详解

1.1 什么是Webpack? 从本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具。 前端模块化 在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具,让我们可以进行模块化开发。 并且在通过模块化开发完成了项目后,还需要处理模块间的各种依赖,并且将其进行整合打包。 而webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系。 而且不仅仅是JavaScript文件,CSS、图片、json文件等等在webpack中都可以被当做模块

hxy1625309592的博客 2926

vue-cli与webpack打包

Webpack 本身只能处理 JavaScript 和 JSON 文件,Loader 使得 Webpack 能够处理其他类型的文件。Vue CLI 采用插件化的架构,拥有丰富的插件生态系统。输入npm -v查看对应的npm版本号;Vue CLI 提供了脚手架功能,可以快速生成 Vue 项目的初始结构和配置文件。:用于执行打包过程中的各种任务,如压缩文件、生成 HTML 文件、清理输出目录等。通过Dos命令,进入到你想建立的第一程序的文件夹;在文件夹下创建first.js和main.js文件。

qq_57093115的博客 1906

Webpack打包图片-JS-Vue

1 Webpack打包图片 2 Webpack打包JS代码 3 Babel和babel-loader 5 resolve模块解析 4 Webpack打包Vue

weixin_56663198的博客 1224

【webpack】webpack打包后, 静态图片资源不显示的若干个问题

最近在搭建公司的前端组件库, vue写的, webpack打包后, 在项目中引用组件库 其中有个组件引用了静态图片资源, 然而打包后在项目中引用该组件的图片就不显示了 遇到了以下若干问题, 小小记录一下~

每天进步一点点, 靠近小目标一点点~ 4250

vue+webpack项目打包后背景图片加载不出来问题解决

vue+webpack项目打包后背景图片加载不出来问题解决

weixin_42966151的博客 3310

webpack打包全过程以及遇到图片不显示问题解决方法

Webpack打包全过程以及遇到css,js,img问题解决方法 文章目录Webpack打包全过程以及遇到css,js,img问题解决方法前言一、Webpack1、运用场景2、安装配置二、案例演示1.引入库2.读入数据总结 前言 Webpack是前端构建工具 前端构建工具就是把开发环境代码转化称运行环境代码。开发环境的代码要通过混淆压缩后才能上线运行,这样代码占用内存较小, 一、Webpack 一般需要构建工具处理的几种情况 代码压缩 将js、css代码混淆压缩,代码体积更小,运行更快 编译语法 编

weixin_43878062的博客 5056
上一篇: 在vuex的store中如何正确的通过axios进行请求操作获取数据
RotatingBlock
博客等级 码龄10年 16粉丝 11原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值