vue组件中插入图片

最新推荐文章于 2024-06-23 13:07:37 发布
最新推荐文章于 2024-06-23 13:07:37 发布
阅读量4.9k 收藏 10
点赞数 3
分类专栏： 前端 文章标签： vue
原文链接：https://blog.csdn.net/wlonging/article/details/68068328
版权
最近在Vue学习交流群里面发现很多小伙伴在想要在vue中显示图片，但是把图片写在data里面作为变量传到模板中的时候却发现图片出不了，以为是图片路径的问题，查了半天还是出不来。

解决方法

方案1： 使用require将图片进入，写法如下
logo: require('../asset/admin/logo.png')
 
 

 
 
  • 1

然后再模板中：

<img :src="logo">
 
 

 
 
  • 1

就可以了。

方案2：把图片放在static文件夹中，如下

这里写图片描述

然后再data里面直接这样写

logo: '../static/images/logo.png'

 
 

 
 
  • 1
  • 2

就可以直接使用了。

方案3：使用import
import imgUrl from '../static/images/logo.png'
    风兮w
    关注
    • 3
      点赞
    • 踩
    • 10
      收藏
      觉得还不错? 一键收藏
    • 0
      评论
    专栏目录
    vue组件实现任务清单小功能
    10-16
    在这个“vue组件实现任务清单小功能”的案例中，我们将探讨如何利用Vue的组件系统来创建一个简单的任务管理应用。 首先，Vue项目通常有以下目录结构： 1. **README.md**：这是一个Markdown文件，用于记录项目的...
    Vue header组件开发详解
    12-29
    2. App.vue 中注册组件 export default { components:{ v-header:header } } 3. 使用组件 <v sell=sellerObj></v> 解释：:sell=”sellerObj”,这里就像一个函数传参一样把sell当成形参，sellerObj就是实参，...
    vue项目中如何引入图片
    donghua201的博客
    10-30 2173
    require 是赋值过程，其实 require 的结果就是对象、数字、字符串、函数等，再把 require 的结果赋值给某个变量。import 是解构过程，但是目前所有的引擎都还没有实现 import，我们在 node 中使用 babel 支持。，也仅仅是将 ES6 转码为 ES5 再执行，在变量中使用require引入地址。直接将图片引入为模块使用。
    vue样式 引入图片_vue怎么插入图片？
    weixin_29522547的博客
    12-31 4779
    vue怎么插入图片？下面本篇文章给大家介绍一下在vue中插入图片的几种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。vue怎么插入图片？首先给图片地址绑定变量 在script中设置变量//方法1.直接将图片引入为模块require imgUrl from "../assets/test.png"//方法2.将imgUrl放在数据里data(){return {imgU...
    vue引入图片
    最新发布
    xiaohua0708day的博客
    06-23 272
    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引入图片的方式
    preserveXing的博客
    06-01 9094
    vue中有关图片引入的几种方式
    vue.js插值，插入图片，属性
    weixin_34074740的博客
    11-28 324
    <html><head><title>Insert title here</title><script type="text/javascript" src="${pageContext.request.contextPath }/js/vue.min.js"></script><style type="text/css...
    vue 导入图片方法（简单易用）
    u012914342的博客
    05-31 2459
    1.直接在标签内添加： :style="'background-image:url('+require('../../assets/bg.png')+')'" 2.css穿透 div >>> .imgSrc { background-image: url('~@/assets/bg.png') }
    Vue 中对图片地址进行拼接的方法
    10-18
    在Vue.js开发中，有时我们需要处理图片资源的URL，尤其是当从服务器获取的数据中，图片的URL只是一个部分路径或者不完整的URL时。本篇文章将详细讲解如何在Vue中对图片地址进行拼接，以便正确地展示图片。 首先，...
    vueimginputer基于Vue2的图片输入框
    08-09
    Vue组件通常包括模板、数据、方法和生命周期钩子等部分。Vueimginputer可能包含以下关键特性： 1. **模板**：组件的HTML结构，定义了如何显示图片输入框。可能包括输入按钮、图片预览区域、进度条等元素，这些元素...
    Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
    10-16
    在Vue组件的模板中，我们可以设置一个编辑器区域和一个图片上传组件。`el-upload`是Element UI中的上传组件，用于处理图片上传。注意，我们需要定义`action`属性为图片上传的服务器接口地址，`headers`用于设置请求...
    在 vue 项目中，常用的4 种引入图片的方式
    weixin_47661354的博客
    06-28 7981
    【代码】在 vue 项目中，常用的4 种引入图片的方式。
    vue的引入图片的方式
    韦大人orz
    01-20 4707
    web需要大量图片，图片来源大致分为这几个： 静态的 动态的 写法大致分为这几个： 直接在img标签中书写 在data等域中书写，然后动态改变 img <template> <div class="hello"> <img src="../assets/logo.png" alt=""> </div> ... </template> // 项目中的图片路径为 // src/assets/logo.
    如何优雅地在Vue页面中引入图片
    zjjcchina的博客
    12-13 7462
    在我们写vue项目中肯定会用到各种图片，那么如何更好的使用图片资源呢。这里我讲一下我常用的方法。 错误示范 也许你的代码里常常会这样写 <template> <img :src="src"> </template> <script> export default{ data(){ return { src: require('xxx.jpg') .
    vue之上传组件展示图片样板（仅页面展示用）
    牛先森家的博客
    06-29 480
    vue之上传组件展示图片样板vue之上传组件展示图片样板（仅页面展示用）代码如下主要使用方法效果如下添加水印版本代码如下效果如下 vue之上传组件展示图片样板（仅页面展示用） 代码如下 <template> <div class="content-box"> <div class="title">点击上传图像 （支持image/jpg,image/jpeg,image/png,image/gif格式图片 且大小不能超过2MB）</div>
    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组件图片加载注意事项！！！
    weixin_44428199的博客
    10-25 235
    ！！！很重要vue组件加载图片 vue组件加载图片 <template> <ul class="btmNav"> <li> <a href="javascript:;" @click="change('/home')"> <img :src=" '/home' === this.$route.path ? iconArr[0].selecetd
    vue js中添加图片
    这是我的博客
    02-20 1万+
    新年来到现在才将心思真正的摆在了工作上，故在此记录一个小要点引以作为新年博客坚持的起始吧~~~~ vue在js中去添加图片的方式如下： 方法一：在data里面将图片路径保存好 imgList: [ { openItem: '../static/icon/ic_police.png' }, { ...
    Vue elementui界面中插入图片
    06-08
    在 Vue 中使用 ElementUI 组件库，可以通过 `el-upload` 组件实现图片上传和显示。以下是一个简单的示例： ```html <template> <div> <el-upload class="avatar-uploader" action="/api/upload" :show-file-list="false" :on-success="handleUploadSuccess" :before-upload="beforeUpload" > <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </div> </template> <script> export default { data() { return { imageUrl: '', }; }, methods: { handleUploadSuccess(response, file) { this.imageUrl = response.url; }, beforeUpload(file) { // 验证图片格式和大小等信息 }, }, }; </script> <style scoped> .avatar-uploader { display: flex; justify-content: center; align-items: center; width: 120px; height: 120px; border: 1px dashed #ccc; border-radius: 50%; overflow: hidden; } .avatar-uploader-icon { font-size: 28px; color: #999; } .avatar { width: 100%; height: 100%; object-fit: cover; } </style> ``` 在上面的示例中，使用了 `el-upload` 组件来实现图片上传，设置了上传成功的回调函数 `handleUploadSuccess`，将上传成功后的图片 url 赋值给 `imageUrl`，从而实现图片的显示。如果没有上传成功的图片，则显示一个加号图标。同时，通过设置一些样式，将上传组件样式化为圆形头像的形式，具体实现可以根据实际需求进行调整。
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

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

    抵扣说明：

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

    余额充值