[随手记]vue项目动态生成的img地址信息，webpack无法打包问题

最新推荐文章于 2024-03-03 17:49:44 发布
最新推荐文章于 2024-03-03 17:49:44 发布
阅读量318 收藏
点赞数
分类专栏： 随手记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tom_wong666/article/details/90383106
版权

问题

vue项目动态生成的img地址信息，webpack无法打包问题

// 这样动态引入的地址，地址无效，因为没有被打包
<img  :src=" imgSrc ">

Webpack资源打包时的特点

webpack不会对动态生成的资源地址打包，webpack不会对动态生成的资源地址打包。

解决方法

手工require引用动态资源

<img  :src=" require( imgSrc ) ">
tom_wong666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
08-28
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法总结篇 在本文中，我们将讨论webpack vue项目打包生成的文件中资源文件报404问题的修复方法。在使用webpack + vue做个人娱乐项目时，可能会出现css js ...
vue 项目打包图片没有打包进去问题解决
jiangjunyuan168的博客
02-24 1732
vue 项目打包，项目中引用了的图片没有被打进包里，导致打包后的项目图片缺失。
Vue打包未将img中src的文件打包进去
最新发布
qq_59833893的博客
03-03 580
src中的路径使用@/ 即可。
webpack打包html中img标签引入的图片遇到的问题
lscheng的博客
10-18 1843
解决Automatic publicPath is not supported in this browser问题 一、起因 最近在学习webpack之时遇到了这个问题，问题是出现在学习打包html中的img标签之时，根据教程打，教程的loader配置是这样的 { test:/\.(jpg|png|gif)$/, //多个loader时，使用use，一个时可以直接使用loader //下载
Vue常见问题总结（改变vue打包路径、img的src绑定问题、$nextTick、变量包含script结束标签报错）
Flowering_Vivian的博客
09-23 761
一、改变vue打包的路径 修改config目录下的index.js var path = require('path') module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'),
vue系列---项目打包找不到图片路径
yyjourney的博客
01-22 3621
在测试环节发现有图片找不到，发现是图片路径没有写对。 报错如下： 原代码： "/src/assets/img/arrow.png" alt="" class="col-step"> 这种引入图片的方式是错误的，虽然在页面展示的时候会出现，但是在打包后就会出现编译问题，src是无法编译的。 正确的引入格式： 第一种： img src="../../assets/i
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
10-16
主要介绍了详解webpack打包vue项目之后生成的dist文件该怎么启动运行,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
在Vue.js开发中，使用Vue CLI创建的项目通常会依赖Webpack进行构建和打包。Webpack是一个模块打包工具，它能够将JavaScript、CSS、图片等资源文件转换并整合到一起，生成适合部署到生产环境的静态资源。然而，在实际...
解决在vue项目中webpack打包后字体不生效的问题
10-18
在Vue项目中，WebPack是常用的模块打包工具，它能够将我们的前端代码打包成静态资源，以便部署到生产环境。然而，在打包过程中有时会遇到一些问题，其中之一就是字体不生效。这个问题通常表现为在开发环境中正常显示...
Vue3 + echart动态引入图片以及打包问题
weixin_43413047的博客
07-26 617
vue3动态图片引入问题
Vue打包时图片资源放置在src同级static文件下出现图片访问失败的问题
swiftlinlei的博客
08-11 5486
1.问题：图片放在src同级目录下static目录下，开发环境使用相对路径，运行正常，打包后图片访问失败 2.原因：参考文档（https://www.jianshu.com/p/563e417e2d1f）,路径变更了 3.解决方式：使用绝对路径，static/xx.png...
vue配置文件不打包
weixin_34247299的博客
05-27 3597
为什么80%的码农都做不了架构师？>>> ...
vue-cli构建项目imgsrc动态路径打包找不到路径资源
mlonly的博客
02-28 4184
处理静态资源 静态资源可以通过两种方式进行处理： 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理 从相对路径导入 当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用...
Vue的静态资源打包问题
实践求真知
09-12 729
一问题 通过v-for循环，无法看到页面图片。 <template> <div v-for="img in imgs"> <img width="100%" height="100%" ;src="img"> </div> </template> <script> export default { name:"Home.vue", data(){ return ...
解决vue-cli中webpack无法打包js变量中的图片路径
遛狗的代码的博客
03-12 2921
首先，我们先来重现一下问题，如果直接通过路径的形式引入一个图片，例如：&lt;template&gt; &lt;div id="app"&gt; &lt;img src="./assets/demo.jpg"&gt; &lt;!--&lt;img :src="demo"&gt;--&gt; &lt;HelloWorld/&gt
vue3 + vite 动态引入不被打包的静态资源
listener_life的博客
05-30 2452
vue3 + vite 动态引入不被打包的静态资源
用webpack写一个自己的loader（案例：webpack图片不打包问题）
cmyh100的博客
05-17 806
遇到的问题：webpack搭建项目的时候，因为使用file-loader将图片打包，但是index.html的模板中的图片，因为没有被依赖并不会被一并打包。 解决方案：（偷懒可以直接 npm ihtml-reqimg-loader --save-dev ） 找到了一个html-withimg-loader，它似乎可以解决这个问题 但是用上了之后发现，它不支持我通过resolve.alia...
在vue中的js部分导入图片后通过webpack无法被正确打包的问题
RotatingBlock的博客
12-30 3921
具体描述 在vue组件的js部分导入图片要使用require的形式导入，否则webpack不能正常导入，因为其路径不符合其解析规范 原因 在引入图片的时候的地址数据的时候需要使用require来讲图片作为模块引入，这样才会被webpack正确的打包的项目文件中，否则会因为webpack根据依赖打包而找不到指定的图片 如果是在HTML中的img中通过v-bind引入引入图片,src为对应的数据变量的话
webpack打包vue项目之后生成的dist文件本地运行
09-02
在使用webpack打包vue项目后生成的dist文件，我们可以通过以下步骤在本地运行： 1. 首先，我们需要将dist文件夹复制到我们项目的根目录下。假设我们的项目名为"my-project"，现在我们的项目目录结构如下： ``` my-project ├── src │ ├── components │ ├── views │ └── ... ├── dist ├── ... ├── package.json └── ... ``` 2. 然后，我们需要安装一个本地服务器，以便在本地运行我们的打包后的项目。我们可以通过使用Node.js的http-server模块来实现。在终端中，进入我们的项目根目录，并运行以下命令来安装http-server： ``` npm install http-server --save-dev ``` 3. 安装完http-server后，我们可以在package.json文件中的"scripts"字段下添加一个启动脚本。在"scripts"字段下添加以下内容： ``` "scripts": { "serve": "http-server dist" } ``` 4. 然后，在终端中运行以下命令来启动我们的本地服务器： ``` npm run serve ``` 这将会在本地启动一个服务器，并将"./dist"目录设置为默认的静态文件目录。我们可以通过访问"http://localhost:8080"来预览打包后的项目。 通过以上步骤，我们成功在本地运行了通过webpack打包后生成的dist文件。您可以在本地进行调试和预览，以确保打包后的项目正常运行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tom_wong666

码字不易，分享有功，期待赞赏！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值