electron-vue中加载render文件夹下的图片资源在开发环境下加载失败解决方案(亲测有效！！！)

最新推荐文章于 2023-12-26 20:07:59 发布

DLGDark

最新推荐文章于 2023-12-26 20:07:59 发布

阅读量1.4k

点赞数 2

分类专栏： electron 文章标签：图片加载 electron-vue img

本文链接：https://blog.csdn.net/dlgdark/article/details/115545135

版权

electron 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

原有的正常项目中的写法(在开发环境下加载会失败)：

<img :src="userInfo.companyLogo ? userInfo.companyLogo : '../../../assets/images/baseImg/companyLogo.png' " class="company-logo" />

修改后的代码：

<img :src="userInfo.companyLogo ? userInfo.companyLogo : img_companyLogo" class="company-logo" />

import img_companyLogo from "@/assets/images/baseImg/companyLogo.png";

data(){
	return {
		img_companyLogo	
	}
}

此时，默认加载的图片就会正常显示出来~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

DLGDark

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

electron 样式不加载_electron-vue，启动之后没了样式和图片是什么原因呢，请大佬帮忙康康...

weixin_34944897的博客

12-24

723

ui用的iview，import Vue from 'vue'import axios from 'axios'import App from './App'import router from './router'import store from './store'import iview from 'iview'import 'iview/dist/styles/iview.css'impo...

electron-vue架构解析3-开发环境启动流程分析（原）

阿杜的专栏

06-11

7293

这一节我们来看开发环境的启动流程。该框架主要修改是对开发环境的优化，包括了于开发环境的配置文件隔离，主进程和渲染进程配置文件隔离，编译过程提示等功能，因此这一节内容才是整个框架的核心。我们从开发人员用到的启动命令说起。从package中我们看到启动命令就是： &quot;dev&quot;: &quot;node .electron-vue/dev-runner.js&quot;, 也就是在终端使用npm run dev...

2 条评论您还未登录，请先登录后发表或查看评论

Electron仿制weGame第二节图片资源

10-16

资源文件本想免费，奈何资源分数最低1分。 Electron 可以使用js+html+css 做桌面程序，详情查看我的相关文章 https://blog.csdn.net/qq_28254093/article/details/83049653 Electron 仿制lol TGP游戏盒子

Electron-builder打包vue项目后,背景图片不加载的问题

m0_63548381的博客

04-09

2971

打包后的项目启动之后，背景图片没有成功加载，只有一片空白。此时打开调试工具可以看到,electron自动把图片路径加上了/img/我们这时打开打包后的dist_electron文件夹，打开bundled\img目录,这就是上面报错的路径。

解决electron-vite打包后图片加载失败的问题

m0_56823974的博客

12-20

976

这个安全策略 Content-Security-Policy 限制网页当中一系列的资源获取的情况，从哪里获取，请求发到哪个地方。在使用electron开开心心的开发项目的时候，本地调试没有问题，当时打包后，安装发现图片资源今天加载不出来，头大了吧。而default-src限制全局的和链接有关的作用范围，所以才会出现图片加载不出来。于是打开调试发现一堆爆红，发个文章记录一下，也好让各位少走点弯路。打开index.html文件你会发现这个一个标签。至此喜大普奔，希望各位少踩点走点弯路。

使用electron-builder构建React+Electron应用时图片资源无法加载

u010769267的博客

01-01

1858

使用electron-builder构建React+Electron应用时遇到了一个问题，开发模式下一切正常，打包之后图片资源无法加载。在调试工具中查看，发现是资源路径错误，图片路径为正常electron-builder打包后的资源路径应该是file://my/app/path/resources/app.asar/build/static/media/antd.9bc8753a.svg这样的。查找了半天，发现是react-router的问题，使用BrowserRouter就会导致路径不正常，推测

electron-vue初探

汉堡会有的

03-12

5467

前端技术发展迅速，各种框架层出不穷，不外乎要借助浏览器去实现渲染。最近一朋友想让我帮他做个打印机的插件，实现打印特定内容的功能，但又不接受网页的形式，于是技术选型我选择了electron，正好我之前也没玩过electron，就决定搞个桌面端demo试试。什么是electron? Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负...

vue cli3+/electron-vue项目中基于svg-sprite-loader依赖实现字体图标

斗师——Ace

08-12

851

1. 在开发环境安装svg-sprite-loader依赖： npm i svg-sprite-loader -D //-D开发依赖 2. 在vue.config.js中配置： // vue ui 可视化界面管理配置/eslint/依赖。 const path = require('path') function resolve (dir) { // 传值相对路径dir，返回绝对路径 return path.join(__dirname, dir) } module.exports =

electron-vue搭建项目的坑和优化

斗师——Ace

11-21

591

1. electron项目优化：参考https://juejin.im/post/6844904029231775758。 2. electron-vue项目搭建：参考https://blog.csdn.net/qq_42231156/article/details/109209812。 3. process is not defined报错提示：参考https://blog.csdn.net/qq_42231156/article/details/109208053。 4. "$router/$st

electron-vue的原理以及初次使用流程

qq_40261735的博客

05-26

1300

这里写目录标题electron-vue介绍electron项目结构electron运行过程electron-vue初次使用过程 electron-vue介绍 electron项目结构 electron运行过程 electron-vue初次使用过程

Electron 加载图片/加载网络图片

最新发布

little_boyyy的博客

12-26

1045

electron 加载网络图片

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

p15097962069的博客

05-12

278

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

electron img无法加载带file:///的绝对路径图片问题

weixin_42453381的博客

07-09

2583

原因electron 4.x开始后的安全策略，不识别file:///开始的url 解决方案：main.js中，加入webSecurity: false，并且自定义file:///协议的解析 import { app, BrowserWindow, ipcMain, protocol } from 'electron' function createWindow () { /** * Initial window options */ mainWindow = new BrowserWin

Vue 打包后背景图片不显示问题

你蠢哭我咯的博客

05-14

3140

如果你是直接打开dist/index.html,需要将config/index.js改为下面 build: { assetsPublicPath: './' } build/utils.js增加 function generateLoaders (options) { ... if (options.extract) { return ExtractT...

vue打包后背景图片不显示问题

疯流人物

03-02

1216

vue打包后CSS中引用的背景图片不显示问题今天在插入背景图片过程中，遇到了路径错误的问题，通过网上查询，找到了解决的办法，但是大部分都没有讲造成这种问题的原因，故我简单地总结了一下，并加入了一些自己的理解，欢迎共同探讨~ 当用vue-cli自动构建项目后，有两种运行方法，分别是： npm run dev : 提供一个开发的环境，自动热更新，资源使用绝对路径，所以可以正常看...

Electron：资源

Cynhard的专栏

10-30

593

.col-sm-4 .col-sm-4 .col-sm-4

electron加载本地图片-打包处理字符集问题-vue项目改electron

BLUESKYHOST的博客

12-25

1259

安装 npm i -g electron 注意事项正常无法安装在中国需要配置源地址 npm config set registry https://registry.npm.taobao.org npm config set disturl https://registry.npm.taobao.org npm config set electron_mirror http://npm.taobao.org/mirrors/electron/ 下载完毕注释或者恢复之前的配置我的地址如下根据

Refused to load the image

svygh123的专栏

06-08

1292

cordova在运行的时候,在浏览器报一下异常最后可运行的修改结果如下因为文字提示含有非法字符...

electron-vue页面加载太慢

05-25

如果您使用的是 Electron-Vue 框架，可能会遇到页面加载缓慢的问题。这可能是由于以下原因导致的： 1. 应用程序过大：如果您的应用程序太大，这可能会导致页面加载缓慢。您可以尝试优化您的代码，删除不必要的依赖项，或者使用代码分割来减少页面的大小。 2. 渲染进程过多：如果您的应用程序有很多渲染进程，这可能会导致页面加载缓慢。您可以尝试减少渲染进程的数量，或者使用 Web Workers 来分离页面的计算和渲染任务。 3. 资源加载慢：如果您的应用程序依赖于外部资源，如图片、CSS 和 JavaScript 文件，这些文件加载缓慢可能会导致页面加载缓慢。您可以尝试使用 CDN 加速外部资源的加载，或者使用 Webpack 来优化资源加载。 4. 缓存问题：如果您的应用程序使用了缓存，可能会导致页面加载缓慢。您可以尝试清除缓存，或者使用一些工具来管理缓存。综上所述，您可以通过以上方法来解决 Electron-Vue 页面加载缓慢的问题。