vue引入静态资源

最新推荐文章于 2024-08-20 12:09:08 发布
最新推荐文章于 2024-08-20 12:09:08 发布
阅读量527 收藏
点赞数
分类专栏： 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_王雅格
关注
专栏目录
vue引入静态js文件的方法
10-15
在Vue.js应用中引入静态JavaScript文件是常见的需求，特别是在处理一些全局配置或者第三方库时。以下将详细讲解如何在Vue项目中引入静态JS文件，包括针对不同Vue CLI版本的处理方式，以及避免常见错误的方法。 首先...
Vue项目中使用img图片和background背景图的使用方法
总结前端开发中遇到的问题，分享前端知识
09-11 1万+
Vue项目中使用img图片和background背景图的使用
vue css引用背景图片问题
iunk的博客
07-12 1万+
在css中的 background 属性中，正常是使用 background: url(’…/assets/img/hello.png’); 就能引入静态背景图片； 如果服务器上存在前缀的时候： 比如 www.baidu.com/hello/你的项目， 这里的hello就是你的前缀，这时候就会出问题了，背景图片找不到了，下面踢狗两种方法。 一：打开 build 文件夹下的 utils.js 找到如...
Vue-静态资源路径的使用
最新发布
m0_74462339的博客
08-20 330
当你在 Vue 项目中使用@/assets或相对路径引用静态资源时，Webpack 会处理这些路径。@/assets是 Vue CLI 的路径别名，表示src/assets目录。如果你遇到错误，通常是因为 Webpack 未正确处理这些路径，或者你的静态资源没有正确地放在构建后的目录中。
小程序 | background-image无法获取本地资源图片
Uching的博客
08-16 5175
用background-image获取本地资源图片时，会出现以下报错 官方文档写明了本地资源无法通过 WXSS 获取，但是可以用网络图片，或者 base64 网络图片https://thyrsi.com/#upload 将图片传上去，然后将外链地址复制到url base64http://base64.xpcha.com/ 将图片传上去，然后将转码复制到url（转码后比较长，所以我通...
vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式
热门推荐
我总是词不达意的博客
07-20 3万+
vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式
【零基础学会uniapp系列】8、 静态资源的引用
jysf98746的博客
02-08 1495
在项目的编写中，经常会用到一些公共、重复的函数，这时候，就可将函数独立写入到一个js文件中，然后在用到的地方进行引用，就不用重复写同一段代码了，同时也能让程序看起来更加的美观。一般的，可以将通用的js文件写入到项目下的common目录中，或者写入到utiljs目录中，当然这些名字都是自己起的。静态资源，指的是程序中用到的图片、图标、字体等内容，这些内容应该存储于：static文件夹下。有些时候，在打开他人的工程进行学习时，会无法正常编译，或者会提示缺少某个js文件。路径中的@符号，代表的是项目的根目录。
解决vue打包之后静态资源图片失效的问题
08-28
解决 Vue 打包之后静态资源图片失效的问题 在 Vue 项目中， 经常会遇到一个问题，即在打包之后静态资源图片失效的问题。这种问题可能会导致图片无法显示，控制台中提示某个图片没有找到（404 错误）。这种问题的...
Vue打包后访问静态资源路径问题
10-16
3. **使用`require`引入**：对于需要在JavaScript中使用的静态资源，可以通过`require`或`import`语句引入，Vue CLI会自动处理路径。 4. **使用`publicPath`选项**：在Vue配置文件`vue.config.js`（如果不存在，...
浅谈vue引用静态资源需要注意的事项
01-19
项目结构如下： 想在icon.styl文件夹里面引用字体图标，使用相对路径，但是报错...以上这篇浅谈vue引用静态资源需要注意的事项就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
详解vue静态资源打包中的坑与解决方案
08-28
Vue 静态资源打包中的坑与解决方案 本篇文章主要介绍了 Vue 静态资源打包中的坑与解决方案，主要解决路径问题。下面是详细的知识点： 一、 Vue-cli 默认配置打包后部署至特定路径下静态资源路径错误问题 * 问题...
vue项目使用background-image设置背景图报错的解决
bbt953的博客
02-17 5689
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项目 图片引用
IT谷小白的Blog
11-07 5041
项目vue版本：vue 2.x 脚手架：webpack 1、静态引用图片 像logo、等一些不变的图片，通常直接是直接写s的 1.1、图片在assets下 创建webpack项目时会生成 /src/assets 如果图片在该文件下，可以通过此方式引用（直接引用路径）： <img src="@/assets/图片路径" > <!--<img src="../assets/图片路径" > 这里的 @ 指的是该项目 --> 1.2、图片在static下 也会自动生
vue项目中加入图片和背景图：img、background-image
qq_49097495的博客
07-09 1万+
*以下两种路径方式都可以*/二、img直接引入图片。第一种方式：推荐使用。
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中引用assets中的图片的几种方式
Sakura1998gis的博客
12-08 1万+
作为img标签引进来 <img class="img" alt="example" :src="require('./../assets/image/applicationOne.png')"> 作为背景图片引入 <span :style="'background-image:url('+require('./../assets/image/gotoSystemTwo.png')+')'" ></span> ...
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、付费专栏及课程。

余额充值