vue项目 图片引用

最新推荐文章于 2024-06-23 13:07:37 发布
最新推荐文章于 2024-06-23 13:07:37 发布
阅读量4.7k 收藏 8
点赞数 2
分类专栏： vue 文章标签： vue.js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46241525/article/details/121197198
版权
项目vue版本：vue 2.x脚手架：webpack1、静态引用图片像logo、等一些不变的图片，通常直接是直接写s的1.1、图片在assets下创建webpack项目时会生成 /src/assets如果图片在该文件下，可以通过此方式引用（直接引用路径）：<img src="@/assets/图片路径" ><!--<img src="../assets/图片路径" >这里的 @ 指的是该项目-->1.2、图片在static下也会自动生
摘要由CSDN通过智能技术生成

vue版本：vue 2.x

脚手架：webpack

1、静态引用图片

像logo、等一些不变的图片，通常直接是直接写s的

1.1、图片在assets下

创建webpack项目时会生成 /src/assets
在这里插入图片描述

如果图片在该文件下，可以通过此方式引用（直接引用路径）：

<img src="@/assets/图片路径" >

<!--<img src="../assets/图片路径" >
这里的 @ 指的是该项目
-->
最低0.47元/天 解锁文章
IT谷小白
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue项目引入图片
seimeii的博客
04-25 861
1.html 2.data中引入 alarmImg: require("@/assets/screen/alarm.png") 3.第三种写法 let img = new Image(); img.src = require("./assets/imgs/drag.png"); 3.第四种写法 <img :src="require('@/assets/img/alarm/alarm.png')" alt="图片" /> ...
详解vue项目中实现图片裁剪功能
10-16
在Vue项目中实现图片裁剪功能是常见的需求，特别是在用户上传头像或处理图像时。本文将详细介绍如何在Vue 3.6.3版本的环境中使用两种不同的方法来实现这一功能：一是借助`cropperjs`插件，二是利用原生的`canvas`...
vue中动态引入图片
qq_41742576的博客
02-29 1890
可以看出普通加载的图片会被编译成/img/img.13eb2ff7.jpeg这种路径，而动态加载的还是原始路径，这是因为webpack或vite，会将代码编译，最终在内容内构造出一个类似于打包后的dist文件，而就会将普通方式图片路径编译转化成dist文件夹下img文件夹下的资源。很多时间，不管是vue2，还是vue3开发中都会遇到，动态渲染图片的功能，但是为什么我们直接将图片的路径直接赋值给变量的时候，图片渲染不出来，而通过require引入加载图片后却能正常渲染呢？（以下代码为vue3，vue2一样）
在vue2的data里面引用本地图片
weixin_52326756的博客
03-01 820
在vue2的data里面引用本地图片
vue引入图片
最新发布
xiaohua0708day的博客
06-23 261
2、在css或者scss或者html里面的src中引入图片使用（注意如果是:src=后面用第1种方式引入路径）情况二，在scss里面的background-image:url(路径)用下面的，注意static前面多了/也可以在代码中直接使用icon（等同于Vue2中的require('@/assets/图片')）1、在js代码里面 或者 html里面用"v-bind:"或":属性名"绑定路径的时候使用。情况一，在html里面的<img src='引入'>用下面代码。Vu3引入图片路径的方法。
2024年最全转载：Vue引入图片的几种方式_vue2 index(1)，前端多线程实现方式及并发与同步
2401_84438488的博客
05-07 201
在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。在vue组件中定义一个变量，变量值为”使用require()方法获取的文件路径”。require()方法是将编写代码时定义的路径转换为编译打包后的路径。已知我们在vue中配置@为src的目录。
vue引入图片的几种方式
qq_36571836的博客
07-16 3万+
Vue引入图片的几种方式 情况1：图片在/public目录下 把图片放到与index.html同级的目录下 方式1 因为vue编译后会生成index.html，所以我们将图片与index.html放在同一目录下，相当于在index.html中使用引入图片 <!-- img标签引入图片：图片名称，这种属于相对路径，在index.html的同级目录下查找此图片 --> <img src="login-bg.png"> <!-- img标签引入图片：'/' + 图片名称，这种属于绝
vue动态引入图片
m0_68324632的博客
08-29 9154
这篇文章主要介绍了关于vue图片路径的处理问题，在我们想要动态加载图片路径时，由于vue的打包原理不同，我们也有不同的处理图片路径方法，希望对大家有所帮助。如有错误或未考虑完全的地方，望各位斧正。...
vue的三种图片引入方式
热门推荐
编程菜鸟夜灵的日常...
04-20 17万+
/方法1.使用import将图片引入为模块，然后将其存入data中。//方法2.使用require将imgUrl放在数据里。//方法3.在生命周期函数中设置url变量。然后在script中设置变量。首先给图片地址绑定变量。
vue项目中如何引入图片
donghua201的博客
10-30 2165
require 是赋值过程，其实 require 的结果就是对象、数字、字符串、函数等，再把 require 的结果赋值给某个变量。import 是解构过程，但是目前所有的引擎都还没有实现 import，我们在 node 中使用 babel 支持。，也仅仅是将 ES6 转码为 ES5 再执行，在变量中使用require引入地址。直接将图片引入为模块使用。
vue中引用图片
heerey525
12-21 1561
一、template中引用图片 1. 直接用 <template> <img src="@/assets/images/img.png"> <img src="../../../assets/images//img.png"> <template/> 2. import引入 <template> <img :src="imgUrl"> <template/> <script> import imgUrl
乐橙 vue项目 demo
03-04
【乐橙 vue项目 demo】是一个基于Vue.js前端框架的示例项目，旨在为开发者提供一个基础的开发环境和模板，方便快速上手Vue.js的开发。这个项目包含了多个配置文件和源代码目录，有助于理解Vue项目的结构和配置，以及...
解决vue项目打包后提示图片文件路径错误的问题
12-12
vue项目打包后在production模式下提示图片 ‘404（not found），在dev环境下好好的，打包了就提示这个错误。这是为什么呢，以前第一次使用vue-cli构建项目的的时候只有两个图片文件，当时部署后报错路径问题， 当时...
vue项目里面引用svg文件并给svg里面的元素赋值
10-14
在Vue项目中引用SVG文件并给SVG内部元素赋值是一个常见的需求，特别是在处理复杂的SVG图形时。本篇文章将详细介绍如何实现这一目标。 首先，我们需要理解SVG（Scalable Vector Graphics）是一种基于XML的矢量图像...
Vue实现图片与文字混输效果
01-19
用多了 JQuery ，习惯了使用JQuery的API操作 DOM ，几乎忘记了原生JS对DOM操作，今天在项目中遇到了文字和图片混输的情况，第一个想到的办法是用 textarea 实现，结果发现实现不了图片输入，然后想着找个富文本编辑...
在 vue 项目中，常用的4 种引入图片的方式
weixin_47661354的博客
06-28 7947
【代码】在 vue 项目中，常用的4 种引入图片的方式。
Vue项目引入图片的两种场景和三种方式
weixin_50885665的博客
07-28 6563
public目录Bash。
vue项目中加入图片和背景图：img、background-image
qq_49097495的博客
07-09 9931
*以下两种路径方式都可以*/二、img直接引入图片。第一种方式：推荐使用。
vue项目中通过地址引用svg图片
08-08
在Vue项目中，可以通过地址引用SVG图片。首先，将SVG文件保存在项目的某个目录下，比如在src目录下的assets文件夹内。然后，在需要使用SVG图片的组件中，可以通过`<img>`标签来引用SVG图片。在src属性中，指定SVG图片的路径即可。 例如，假设SVG文件保存在src/assets文件夹下，文件名为logo.svg。在组件中使用SVG图片，可以如下代码示例： ```vue <template> <div> <img src="@/assets/logo.svg" alt="Logo"> </div> </template> ``` 在这个例子中，"@/assets/logo.svg"是SVG图片的路径。"@/"是Vue CLI工具中对src目录的别名，使用这个别名可以方便地指向项目的根目录。所以，使用"@/assets/logo.svg"可以准确地指向SVG图片的位置。 通过上述方式，我们可以在Vue项目中通过地址引用SVG图片。需要注意的是，确保SVG文件的路径是正确的，并且项目的webpack配置支持加载SVG文件，否则可能会遇到图片无法正常显示的问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值