怎么解决vue打包后静态资源图片失效的问题？，那又怎么解决动态设置img的src不生效呢？

最新推荐文章于 2024-05-12 22:35:03 发布
最新推荐文章于 2024-05-12 22:35:03 发布
阅读量907 收藏 1
点赞数
分类专栏： 小知识 vue面试题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42353989/article/details/107640108
版权 
1.找到config/index.js配置文件，找到build打包对象里的assetsPublicPath属性，将默认值：'/'，修改为：'./'。
2.因为动态添加的src被当做静态资源处理了，没有进行编译，所以要加上require。
<img :src="require('@/assets/images/xxx.png')" />
米斯特苏
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2/3解决项目打包后本地图片等资源找不到的问题
weixin_68658847的博客
05-23 1588
vue2/3解决项目打包后本地图片等资源找不到的问题
解决vue打包之后静态资源图片失效的问题
08-28
下面小编就为大家分享一篇解决vue打包之后静态资源图片失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中图片不显示问题 - vue中静态资源加载
好好学习天天向上
01-24 3166
变量的值，该变量的值就是一个字符串，所以最后显示的是字符串没有解析地址去获取图片。是一个 ESM 的原生功能，会暴露当前模块的 URL。require是在运行时加载，import是编译时加载。中会将图片来当做模块来用，因为是动态加载的，所以。为了能让Webpack返回正确的资源路径，使用。根据结果来看，相对地址没有被解析。这里的错误原因理解的是动态绑定。进行解析，然后返回处理过的。进行解析，然后返回处理过的。解析到的路径都会被解析为。提供的一种加载能力，但是。提供的静态资源载入方法，
解决vue3项目打包后部署后某些静态资源图片不加载问题
最新发布
蒾酒的博客
05-12 856
可能是因为在部署后的服务器环境中对中文文件名的支持不完善。服务器在解析 URL 时可能无法正确识别或编码中文字符，导致无法正确找到文件路径。因此，改用英文文件名后，服务器能够正确解析和访问到文件，所以图片显示正常。打开浏览器控制台发现这张图片报错404。然后访问时发现导航栏背景图片没加载。将背景图片名称修改成英文。开发完项目打包并部署。
[vue] 怎么解决vue打包后静态资源图片失效的问题？
歌谣的博客
01-14 2233
[vue] 怎么解决vue打包后静态资源图片失效的问题？ 上面蛮多回答感觉像开玩笑似的，静态资源图片失效分几种情况。 1、确定线上环境是否在根路径上，配置资源根目录，vue-cli2 和 vue-cli3 字段不一致（assetsPublicPath 和 publicPath ），如果项目是根路径上，用'/'，'./'都行，如果是在'/hc'这个路径上，用'./' 相对路径（需history模式），也可以用'/hc/'。 在'/hc'路径上，如果需要本地和线上保持一致，可以用环境做判断设置不同的public
Vue项目打包后静态资源图片失效的问题
weixin_65356798的博客
08-03 970
解决vue项目打包之后静态资源图片失效的问题
怎么解决vue打包后静态资源图片失效的问题
xiaoHelloWord的博客
07-23 2070
找到 config->index.js里面 找到 build->utils.js 设置assetsPublicPath将assetsPublicPath:"/" 改成 assetsPublicPath:"/" 。 加publicPath:"…/…/"
vue3+vite打包后静态资源不显示
Mjxiaomihu的博客
01-04 5981
vue3+vite打包后静态资源不显示
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
11-20
动态设置img的src属性无效，而直接写可以 解决办法： imgSrc写成require(‘path’)； 原因： 动态添加src被当做静态资源处理了，没有进行编译 npm run build 后出现 xxxxxxx net::ERR_FILE_NOT_FOUND 解决...
基于vue打包后字体和图片资源失效问题的解决方法
11-29
1. vue打包后font-awesome字体失效 解决方案： ...以上这篇基于vue打包后字体和图片资源失效问题的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
解决Vue打包后访问图片/图标不显示的问题
10-16
总结一下，解决Vue打包后图片和图标不显示的问题主要涉及两个步骤：一是检查并修正CSS中引用资源的路径，二是通过配置`publicPath`让Vue CLI在打包时自动处理资源路径。完成这两个步骤后，你应该能够成功地在生产...
关于vue中img标签的src属性动态绑定本地图片路径无效的问题
weixin_46545863的博客
06-28 2591
关于vue中img标签的src属性动态绑定本地图片路径无效的问题
vue3+vite项目，打包后，图片失效的问题
insist_life的博客
08-02 7367
第一次使用vue3+vite写一个项目，不太清楚这里的配置和vite构建工具的特性，所以在开发的时候，图片的路径都是用的相对路径；这样的静态路径引入，在开发和打包上测试环境都没有问题，都能正常显示！可以发现，在域名下直接接了src文件，但是这个域名下面是没有src文件夹的。所以浏览器报错了，同时页面没有图片显示，所以打包的时候，图片的路径出问题了！结尾：此文章仅为了下一次有相同的问题能够快速的解决，具体造成这种错误的原因需要去了解vite，有时间再说吧！这样的话，开发和上测试的时候，图片都能够正常显示了！
项目打包后图片显示错误
@不喝海之言@
12-15 616
项目打包后图片显示不正确 项目的打包就以webpack来举例了，我的方法具有一定的借鉴意义，酌情使用。 关于项目打包后图片显示不正确的问题，出现这种问题的原因的有很多种，网上也有很多解决方案。 我这里说的就是其中的一种错误及其解决方案：图片路径错误。【注意：不是路径写错了，写错了自己改一下。】 我先说一下我的错误： 在开发环境下，图片是没有任何问题的，但是打包完成之后再去运行程序就会发现图片...
vue项目打包后部分背景图片加载失败
weixin_43991262的博客
10-31 1765
1、项目打包以后静态文件资源访问不到，路径错误 打开config文件夹下面的index.js文件，找到以下位置： 原文件中红框标出的位置是 assetsPublicPath: '/', 修改为 assetsPublicPath: './', 保存。 要注意的一点是修改index.js中 build对应的该属性，不要修改错了。 2、打包后部分背景图片加载失败 原因：为了节省资源请求次数，vue...
vue开发之图片加载不出来问题解决
lihuanan123的博客
12-15 9966
在使用vue开发项目的时候，经常会遇到的一个问题就是：图片加载不出来。下面是我总结的几种图片加载不出来的情况及解决办法。 一、项目打包完成后，打开整体空白 1、路径问题 原因 在vue+webpack的项目中，项目打包之后的css和js的引用路径是绝对路径，项目部署之后会将静态当成根目录，就造成了文件引用路径的错误。 解决办法 通过修改配置文件，将绝对路径改为相对路径。 ...
vue run build之后图片无法加载
guitarist0505的博客
10-08 1687
原创 VUE项目打包（解决背景图片不显示问题） ...
vue3纯静态页面打包后报跨域问题怎么解决
06-06
如果你使用 Vue CLI 打包纯静态页面，打包后的文件应该是可以直接放到服务器上访问的，不会有跨域问题。如果你的打包文件需要放到本地文件系统中访问，那么你可以通过以下两种方式解决跨域问题： 1. 修改打包配置 在 `vue.config.js` 文件中添加以下配置： ```javascript module.exports = { devServer: { contentBase: './dist', port: 8080, // 允许跨域访问的域名列表 headers: { 'Access-Control-Allow-Origin': '*' } } } ``` 这样打包后的文件就可以通过 `http://localhost:8080` 访问，并且允许跨域访问了。 2. 使用本地服务器 你可以使用 Node.js 搭建一个本地服务器，将打包后的文件放到服务器上访问，这样就不会有跨域问题了。可以使用 `http-server` 这个 npm 包来搭建本地服务器： 首先安装 `http-server`： ```bash npm install -g http-server ``` 然后在打包后的文件夹中运行以下命令启动服务器： ```bash http-server ``` 这样就可以通过 `http://127.0.0.1:8080` 或其他指定的地址来访问打包后的文件了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值