vue引入静态资源

最新推荐文章于 2024-04-04 09:30:06 发布
最新推荐文章于 2024-04-04 09:30:06 发布
阅读量449 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YY_WYG/article/details/125492769
版权

记录一下吧，打包后静态图片找不到

本来这个图片我是直接使用引入，可是上是生产的后报错，找不到这个图片

   background-image: url("../../assets/img/background/beijing.png");

在这里插入图片描述
后来查找资料才发现可以使用require来引入静态资源，成功解决问题

  backgroundImg: require("../../assets/img/background/beijing.png"),

使用背景图

 <div    style="{ backgroundImage: `url(${backgroundImg})` }">

使用的话直接粘贴，避免报错

WYG_王雅格
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 组件静态资源问题
qq_39472229的博客
02-03 418
静态资源可以放在public 目录下 ,对应view src=`../sounds/` 对应如:view/page2目录下的.blade.php文件
在 vue 项目中，常用的4 种引入图片的方式
weixin_47661354的博客
06-28 7408
【代码】在 vue 项目中，常用的4 种引入图片的方式。
Vue项目中使用img图片和background背景图的使用方法
总结前端开发中遇到的问题，分享前端知识
09-11 1万+
Vue项目中使用img图片和background背景图的使用
VUE 爬坑之旅 -- 引入静态资源的正确方式，BAT这种大厂履历意味着什么
最新发布
2301_76348189的博客
04-04 750
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
小程序 | background-image无法获取本地资源图片
Uching的博客
08-16 5125
用background-image获取本地资源图片时，会出现以下报错 官方文档写明了本地资源无法通过 WXSS 获取，但是可以用网络图片，或者 base64 网络图片https://thyrsi.com/#upload 将图片传上去，然后将外链地址复制到url base64http://base64.xpcha.com/ 将图片传上去，然后将转码复制到url（转码后比较长，所以我通...
vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式
热门推荐
我总是词不达意的博客
07-20 3万+
vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式
vue css引用背景图片问题
iunk的博客
07-12 1万+
在css中的 background 属性中，正常是使用 background: url(’…/assets/img/hello.png’); 就能引入静态背景图片； 如果服务器上存在前缀的时候： 比如 www.baidu.com/hello/你的项目， 这里的hello就是你的前缀，这时候就会出问题了，背景图片找不到了，下面踢狗两种方法。 一：打开 build 文件夹下的 utils.js 找到如...
【零基础学会uniapp系列】8、 静态资源的引用
jysf98746的博客
02-08 1348
在项目的编写中，经常会用到一些公共、重复的函数，这时候，就可将函数独立写入到一个js文件中，然后在用到的地方进行引用，就不用重复写同一段代码了，同时也能让程序看起来更加的美观。一般的，可以将通用的js文件写入到项目下的common目录中，或者写入到utiljs目录中，当然这些名字都是自己起的。静态资源，指的是程序中用到的图片、图标、字体等内容，这些内容应该存储于：static文件夹下。有些时候，在打开他人的工程进行学习时，会无法正常编译，或者会提示缺少某个js文件。路径中的@符号，代表的是项目的根目录。
vue引入静态js文件的方法
10-15
在Vue.js应用中引入静态JavaScript文件是常见的需求，特别是在处理一些全局配置或者第三方库时。以下将详细讲解如何在Vue项目中引入静态JS文件，包括针对不同Vue CLI版本的处理方式，以及避免常见错误的方法。 首先...
解决vue打包之后静态资源图片失效的问题
08-28
解决 Vue 打包之后静态资源图片失效的问题 在 Vue 项目中， 经常会遇到一个问题，即在打包之后静态资源图片失效的问题。这种问题可能会导致图片无法显示，控制台中提示某个图片没有找到（404 错误）。这种问题的...
浅谈vue引用静态资源需要注意的事项
01-19
项目结构如下： 想在icon.styl文件夹里面引用字体图标，使用相对路径，但是报错...以上这篇浅谈vue引用静态资源需要注意的事项就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue在index.html中引入静态文件不生效问题及解决方法
10-17
在Vue.js开发过程中，我们有时需要在`index.html`文件中引入静态资源，如CSS、JavaScript文件或图片等。然而，遇到静态文件无法正常加载的问题可能会导致应用样式或功能缺失。本文将深入探讨这个问题，并提供两种...
详解vue静态资源打包中的坑与解决方案
11-28
①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题。 1、问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后...
vue项目中加入图片和背景图：img、background-image
qq_49097495的博客
07-09 9785
*以下两种路径方式都可以*/二、img直接引入图片。第一种方式：推荐使用。
vue项目 图片引用
IT谷小白的Blog
11-07 4679
项目vue版本：vue 2.x 脚手架：webpack 1、静态引用图片 像logo、等一些不变的图片，通常直接是直接写s的 1.1、图片在assets下 创建webpack项目时会生成 /src/assets 如果图片在该文件下，可以通过此方式引用（直接引用路径）： <img src="@/assets/图片路径" > <!--<img src="../assets/图片路径" > 这里的 @ 指的是该项目 --> 1.2、图片在static下 也会自动生
vue项目使用background-image设置背景图报错的解决
bbt953的博客
02-17 5453
background-image: url("@/assets/images/loginbg.png"); // 会报图片路径不对的错误,因为vue2.5及以下版本这种写法没问题;vue2.6及以上版本,用的是webpack4.0就会导致这种错误，需要换一种写法: background-image: url("~@/assets/images/loginbg.png"); // 带~的路径会被webpack解析为require(src/assets/images/loginbg.png) ...
vue静态资源的引用(相对路径,绝对路径,@,~的一些笔记,以图片引入为例,含在线演示)
动感超人的博客
08-21 1万+
vue引入静态资源有相对路径和绝对路径的方式相对路径是URL开头有.绝对路径是URL开头为/或者省略不写相对路径相对的是当前文件绝对路径相对的是public目录并且引入的时候URL开头为~的使用在css里面引入静态资源的时候如果 URL 以 @ 开头会作为一个模块请求被解析。Vue CLI 默认会设置一个指向 src 的别名 @。
CSS中background-image:url()属性设置
Masquerades成长之路
01-03 2万+
background-image 是css中设置背景图片的属性，最近在我用MVC架构开发WEB时却出现了一个小问题。 我在视图里写了这样一句代码： 很显然，我是想将整个页面的背景设置成一张图片，注意里面assets文件夹是Web项目根目录下的文件夹，，这样写貌似没有错误， 但是运行后那张背景图片并没有显示出来，审查元素的结果 显然，在根目录下又加上了控制器“home”的名字，后
vue引入图片路径的三种主要方法
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-16 2万+
1、在js代码里面 或者 html里面用"v-bind:"或":属性名"绑定路径的时候使用2、在css或者scss或者html里面的src中引入图片使用（注意如果是:src=后面用第1种方式引入路径）3、正常引入静态图片路径情况一，在html里面的用下面代码情况二，在scss里面的background-image:url(路径)用下面的，注意static前面多了/
vue引入html静态文件
07-28
在Vue中引入HTML静态文件可以使用`v-html`指令。首先，确保你的HTML文件已经放置在Vue项目的静态资源目录中，通常是`public`文件夹。然后，在Vue组件中使用`v-html`指令来渲染HTML内容。 以下是一个示例： 1. 将HTML文件放置在`public`文件夹中，例如`public/sample.html`。 2. 在Vue组件中引入并渲染HTML文件。 ```html <template> <div> <div v-html="htmlContent"></div> </div> </template> <script> export default { data() { return { htmlContent: '' }; }, mounted() { this.fetchHtmlFile(); }, methods: { fetchHtmlFile() { fetch('sample.html') .then(response => response.text()) .then(data => { this.htmlContent = data; }) .catch(error => { console.error(error); }); } } }; </script> ``` 在上述示例中，我们通过使用`fetch` API 获取HTML文件的内容，并将其赋值给`htmlContent`变量。然后，使用`v-html`指令将HTML内容渲染到页面上。 请记得替换示例中的文件路径和组件名称以适应你的项目。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值