Vue中引用assets中的图片的几种方式

最新推荐文章于 2025-02-03 16:35:34 发布
原创 最新推荐文章于 2025-02-03 16:35:34 发布 · 1.3w 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #css #html

本文探讨了如何使用HTML img标签引入图片作为视觉焦点，以及通过CSS的background-image属性将其用作网页背景。这两种技术展示了在前端开发中利用基础元素创造视觉效果的方法。

作为img标签引进来

 <img class="img"  alt="example" :src="require('./../assets/image/applicationOne.png')">

作为背景图片引入

<span  :style="'background-image:url('+require('./../assets/image/gotoSystemTwo.png')+')'" ></span>
VueCLI 引入图片的3种方式（public、assets、require）
m0_60970928的博客
11-07 1352
在引入的文件中调用require()方法引入对象即可。（可以是任何类型，字符串，变量，对象，方法），在导出的文件中定义,导出的对象的类型不予限定。
关于vue中引入图片问题
仗剑东游的猫
04-03 606
当你的图片文件在assets文件夹下，有以下几种用法： 在标签中直接写路径 <img src="../../assets/images/hhh.jpg" class="image"></img> 背景图也可以直接在样式中写路径 .image{ background:url('../../asstes/images/hhh.jpg') no-repeat;...
vue css 引入asstes中的图片无法显示的四种解决方法
11-21
这里主要针对的是vuecli2中的一些问题。 vue项目中，常常会有很多的图片资源，这样的资源存放位置，通常我们有两个选择：1. static，2. assets 关于这两者之间的区别，和如何选择这里就不多说了！ 这里我们来说说assets目录下存放图片时，在vue组件的css样式中引入图片时将会遇到的一些问题！ 正常情况，我们在本地开发调试的时候，无论什么样的方式引入图片都不会有问题。但是，一大包发布打线上，就会出现图片无法加载的情况！ 这是因为，出于某些原因，有人修改了config目录下的index.js文件中的build对象中assetsPublicPath的值，这个值初始化的时候是 斜
vue引入图片
pscool的博客
07-24 2440
vue中引入图片
vue assets图片使用
Holly1945的博客
12-01 712
背景图片 background: url("~@/assets/logo.png");
详解Vue.js中引入图片路径的几种方式
10-16
以下是几种常见的Vue.js中引入图片路径的方法： 1. 相对路径引用：这是最直接和简单的方法。通过使用以点（.）开始的相对路径，如 "./" 或 "../"，在JavaScript中导入资源或者在template/CSS中引用资源。这种引用...
Vue.js中的图片引用路径的方式
10-19
以下是根据提供的文件内容总结的Vue.js中图片引用路径的几种方法以及相关知识点。 ### 1. 使用模板字符串插值 在Vue模板中，我们可以使用双大括号 `{{ }}` 进行数据绑定，对于图片的src属性，我们可以这样写： ``...
关于vue单文件中引用路径的处理方法
10-18
本文详细介绍了在Vue单文件组件中引用图片资源的几种场景，并对这些场景下可能出现的问题和解决方案进行了深入的解释。 首先，我们来了解一下在Vue单文件组件中引用路径的常见场景。在模版（template）中，图片资源...
前端vue-cli项目中使用img图片和background背景图的几种方法
12-30
一种是脚手架本身资源引用方式的问题,如指定静态资源文件夹. 一种是图片资源引入方式,有时候使用绝对或者相对路径会导致错误. css方法 正常使用background属性即可. 如有问题,应把图片资源放入static静态资源文件夹...
vue2项目中vue文件中引入/assets/images/user_data/下的图片，有几种代码写法
09-11
在Vue 2项目中，引入`/assets/images/user_data/`下的图片通常有以下几种常见的写法： 1. 使用绝对路径： ```html <img :src="/assets/images/user_data/male.png" alt=""> ``` 这种方式直接使用完整的URL路径...
components vue 引用 assets图片
u012174809的专栏
03-26 2833
这个小问题，竟然纠缠了我近一个小时，起先我一直以为是路径出了问题，开始怀疑自己的技术。后来百度，我才明白，用了2年的WEBPACK,我竟还是一无所知。 解决方法 defaultHead: require('../../assets/default_head.svg'), // defaultHead: '../../assets/default_head.svg', 这种是错误的 并且如果是JPG等图片格式，请改成SVG 假如你看了我如上答案解决问题后不保持好奇心，那么你今后的程序之路也就这样了
vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式
热门推荐
我总是词不达意的博客
07-20 3万+
vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式
vue项目 图片引用
IT谷小白的Blog
11-07 5620
项目vue版本：vue 2.x 脚手架：webpack 1、静态引用图片 像logo、等一些不变的图片，通常直接是直接写s的 1.1、图片在assets下 创建webpack项目时会生成 /src/assets 如果图片在该文件下，可以通过此方式引用（直接引用路径）： <img src="@/assets/图片路径" > <!--<img src="../assets/图片路径" > 这里的 @ 指的是该项目 --> 1.2、图片在static下 也会自动生
关于怎么vue使用assets里的图片怎么引用
m0_67068668的博客
06-04 583
如代码所示需要使用require(`@/assets/${item}`)来展示图片，而不能直接在ImgList数组写相对路径。
vue引用assets里的图片笔记
kekexiaomayi的博客
03-24 790
vue引用assets里的图片笔记
vue3+vite使用assets图片图片
Lucky_girl_wan的博客
08-06 442
记录：vue3+vite动态使用图片
在 Vue 项目中引用 assets 文件夹中的几种方式
chu396815830的博客
09-23 2815
在 CSS 文件中，可以使用相对路径来引用图片作为背景图像等。文件的模板部分，可以使用相对路径来引用图片。语句来导入图片资源，然后在需要的地方使用。是 Vue CLI 中配置的别名，指向。在 Vue 组件的脚本部分，可以使用。然后在模板中可以使用。
在vue3+vite项目中引入assets中图片到页面中的几种方式
weixin_47389477的博客
04-12 2588
vue3+vite
Vue 图片引用方式详解：静态资源与动态路径访问
码农研究僧的博客
02-03 3763
在 Vue 开发中，图片的引用方式主要取决于图片存放的位置，常见的存放方式包括： 存放在 public/ 目录 存放在 assets/ 目录 存放在远程服务器 动态拼接图片路径
vue3中如何引用img图片
最新发布
09-11
在Vue 3中引用img图片有以下几种方法： ### 使用 `require` 在 `data` 里定义变量引用图片 在 `data` 里定义变量，其值为 `require` 加上图片从 `src` 下开始的路径。示例代码如下： ```vue <template> <div> <img class="acc" :src="test1" > </div> </template> <script> export default { data() { return { test1: require('../assets/img/logos.png'), } } } </script> ``` 这种方式适用于在Vue 3项目中静态引用图片 [^1]。 ### 使用 `ref` 动态更换图片 利用Vue的 `ref` 来动态地在 `<script setup>` 中更换图片。示例代码如下： ```vue <template> <img :src="imageSrc" alt="Dynamic Image"> <button @click="changeImage">Change Image</button> </template> <script setup> import { ref } from 'vue'; const imageSrc = ref('./assets/logo.png'); function changeImage() { imageSrc.value = './assets/other-image.png'; } </script> ``` 此方法适合需要根据用户操作动态切换图片的场景 [^2]。 ### 定义方法获取图片URL 先定义一个方法 `getImgUrl` 来获取图片的URL。示例代码如下： ```javascript const getImgUrl = (fileName, baseUrl = "src/assets/imgs/home/", type = "png") => { return `/${baseUrl}${fileName}.${type}`; }; ``` 可以在需要引用图片的地方调用这个方法获取图片的URL [^3]。 ### 在接口返回函数处理中动态引入图片 在接口返回函数处理时，使用 `new URL(url, import.meta.url)` 来动态引入图片。示例代码如下： ```javascript dataALL.value.forEach((item) => { const urlImg = `../../../fylogo/${item.BM}.jpg` item.logo = new URL(urlImg, import.meta.url).href }) ``` 这种方式适用于根据接口返回的数据动态加载图片 [^4]。 ### 通过 `new URL(url, import.meta.url)` 动态设置URL `import.meta.url` 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器组合使用，在一个 JavaScript 模块中，通过相对路径就能得到一个被完整解析的静态资源 URL。示例代码如下： ```javascript const imgUrl = new URL('./assets/image.png', import.meta.url).href; ``` 这种方法在有很多判断的时候，相比使用 `import` 结合 `switch...case` 判断更高效，适合动态设置图片URL的场景 [^5]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值