vue中图片的引入方式

最新推荐文章于 2024-06-23 13:07:37 发布
最新推荐文章于 2024-06-23 13:07:37 发布
阅读量204 收藏
点赞数 1
分类专栏： vue 文章标签： Vue 图片引入 require 模块化 前端加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45695853/article/details/118543214
版权
1.在img标签里面直接写上路径：
      <div>
      		<!-- 两种写法均可 -->
          <img src="@/assets/imgs/0.jpg" alt="" width="150px" style="margin-right:10px;">
          <img src="../assets/imgs/0.jpg" alt="" width="150px">
      </div>

注释：@指的是src
在这里插入图片描述

1.在js中写入图片路径：

在这里插入图片描述

错误引入方式：

img:[’…/assets/imgs/0.jpg’,’…/assets/imgs/1.jpg’,’…/assets/imgs/2.jpg’]

显示效果如下图：
在这里插入图片描述

FQA: 为什么vue中的js引入图片必须用require?
吃葡萄不吐葡萄皮嘻嘻
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue里面的js引入图片，必须用require
ze1024的博客
09-21 4625
vue中js引入图片,须用require引入 一般情况下,我们在vue里面引入图片的话,基本上是这样子写的 <img src="../../assets/logo.png" alt=""> 但是在有些需求下,图片需要在在js里面引入,这种情况下,vue中js引入图片,需要用require 下面列举例子以供参考 <template> <div style="display:flex;"> <div v-for="it
vue的三种图片引入方式代码实例
10-15
第三种图片引入方式是在Vue的生命周期钩子函数中设置图片路径。这种方式一般在组件创建之前就需要确定图片资源，它适合图片路径可能在组件创建时才决定的情况。例如： ```html export default { data() { ...
vue js引入图片资源
我的博客
05-07 543
require(’’),不然会资源加载失败
vue引入图片
最新发布
xiaohua0708day的博客
06-23 351
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引入图片路径的方法。
vue的图片引入方式
weixin_42213025的博客
05-17 2075
html&lt;wv-swipe :height="250" :autoplay="4000" style="background: #f2f2f2"&gt; &lt;wv-swipe-item v-for="(items,index) in imgpngbox" :key="index"&gt; &lt;img :src="items.imgur
vue 引入图片
zhaofeiweb的博客
09-09 94
<img:src="item.headUrl||defaultImg"alt=""> 第一种 (在data数组中保存数据的情况） defaultImg:require("@/views/ecrm-wx-top/assets/images/icon.png") 第二种 importicon from'@/views/ecrm-wx-top/assets/images/icon.png'; defaultImg：icon 第三种 <im...
vue data引入本地图片的两种方式小结
10-16
在Vue.js应用中，引入本地图片资源是常见的需求，特别是在构建用户界面时。本文将详细介绍两种在`data`属性中引入本地图片的方法，以便在模板中动态显示这些图片。 **方法一：使用`require()`** 在Vue组件的`data`...
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
在Vue-cli3项目中动态引入图片时，常常会遇到图片资源无法被正确加载，浏览器显示404错误的情况。这个问题在项目中使用了动态路径来加载图片资源时尤为常见。本文将从以下几个方面深入探讨这个问题，并提供一个解决...
详解Vue.js中引入图片路径的几种方式
10-16
在Vue.js中，正确地引入和使用静态资源，如图片文件，是一个重要的方面，因为这涉及到资源的管理和最终的应用打包。Vue.js 提供了多种方式来处理静态资源，尤其是在模板（template）和样式（CSS）文件中。以下是几种...
Vue项目中设置背景图片方法
08-28
为了解决背景图片无法正确显示的问题，我们可以使用 Node 中的一种比较有效的方式，即使用 require 函数来引入图片资源。这样，我们就可以完美地解决这个问题，并且使我们的项目更加稳定和可靠。
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的三种图片引入方式
热门推荐
编程菜鸟夜灵的日常...
04-20 17万+
/方法1.使用import将图片引入为模块，然后将其存入data中。//方法2.使用require将imgUrl放在数据里。//方法3.在生命周期函数中设置url变量。然后在script中设置变量。首先给图片地址绑定变量。
vue 通过js引入 图片的方式（解决项目线上图片无法展示的问题）
逆风优雅的博客
03-21 4216
首先将图片都引入，然后导出 import costContent_11 from '../../../assets/img/costContent_11.png' import costContent_12 from '../../../assets/img/costContent_12.png' import costContent_13 from '../../../assets/img/costContent_13.png' import costContent_14 from '../../.
vue中图片引入与使用几种方式
木昆灵寒酥的博客
05-14 801
将编写代码时定义的路径转换为编译打包后的路径。
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引入图片的方式
preserveXing的博客
06-01 9112
vue中有关图片引入的几种方式
如何在vue中引入图片？
weixin_33851177的博客
02-24 1056
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形： 使用一、 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后，在template模板里面 <img :src="imgUrl"> /*或者*/ <img src="../assets/logo.png"> 这种方式是按照正常...
在 vue 项目中，常用的4 种引入图片的方式
weixin_47661354的博客
06-28 8228
【代码】在 vue 项目中，常用的4 种引入图片的方式。
vue中require引入图片
05-12
在Vue中，可以使用`require`来引入图片。具体步骤如下： 1. 在Vue组件中，使用`require`来引入图片，例如： ```javascript 图片"> export default { data() { return { imageSrc: require('@/assets/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吃葡萄不吐葡萄皮嘻嘻

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值