返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何通过src引用assets中的图片
  • 293
分享到

vue如何通过src引用assets中的图片

2024-04-02 19:04:59 293人浏览 安东尼
摘要

目录Vue:src引用assets的图片导入图片并在data中声明使用vue引入图片方式对于静态的img,正常引入即可当使用模板绑定src时vue:src引用assets的图片 导入

vue:src引用assets的图片

导入图片并在data中声明

<script>
import backImg from "../../assets/images/backimg.jpg"; 
export default {
  data() {
    return {
    backImg: backImg,
    };
  } 
</script>

使用

<img :src="backImg"  />

vue引入图片方式

对于静态的img,正常引入即可

<img src="@/assets/img/login/user.png"> // 可以使用@

当使用模板绑定src时

// 不可以使用@,无法解析;也无法找到assets目录
<img :src="@/assets/img/login/user.png"> 

方式1:

// 将图片放到static目录下
<img :src="'../../static/img/login/user.png'"> 

方法2:

在data中require()进来:

// html
<img :src="img"> 
// data
img: require('@/assets/img/login/user.png')

方法3:import进来

// html
<img :src="img"> 
// script
import img from '@/assets/img/login/user.png'
// data
img: img

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue如何通过src引用assets中的图片

本文链接: https://lsjlt.com/news/143991.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue如何通过src引用assets中的图片
    目录vue:src引用assets的图片导入图片并在data中声明使用vue引入图片方式对于静态的img,正常引入即可当使用模板绑定src时vue:src引用assets的图片 导入...
    99+
    2024-04-02
  • vue怎么通过src引用assets中的图片
    这篇文章主要介绍vue怎么通过src引用assets中的图片,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!vue:src引用assets的图片导入图片并在data中声明<script>import&nbs...
    99+
    2023-06-29
  • vue引用assets图片的方法
    vue引用assets图片的方法:1、将图片进行导入并在在data中声明;2、再通过img标签进行引用即可。具体操作步骤:1、导入图片并在data中声明。<script>import backImg from...
    99+
    2024-04-02
  • JavaScript如何通过更改图片的src来实现轮播图效果
    这篇文章给大家分享的是有关JavaScript如何通过更改图片的src来实现轮播图效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Js实现轮播图实现思路这可能是轮播图最简单点的...
    99+
    2024-04-02
  • jquery如何获取图片的src属性
    这篇文章主要介绍“jquery如何获取图片的src属性”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jquery如何获取图片的src属性”文章能帮助大家解决问题。jquery获取图片的src属性方法...
    99+
    2023-07-04
  • css中如何引用图片
    在css中引用图片的方法:1.使用background-image属性引用本地图片;2.使用background-image属性引用网络图片;在css中引用图片的方法使用background-image属性引用本地图片 body{...
    99+
    2024-04-02
  • vue中如何实现img src动态加载本地json的图片路径
    这篇文章将为大家详细讲解有关vue中如何实现img src动态加载本地json的图片路径,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。目录:注意:本地json文件和jso...
    99+
    2024-04-02
  • 探讨如何通过CSS让图片居中
    在网页设计中,图片通常是不可或缺的一部分, 而当图像不符合设计规格或者不居中时,可能会破坏整个网站的布局和美观度。因此,如何让图片居中成为了一个值得注意的问题。CSS 中提供了多种方法来使图像水平居中和垂直居中。在这篇文章中,我们将探讨如何...
    99+
    2023-05-14
  • vue如何在data中引入图片的正确路径
    目录在data中引入图片正确路径1.通过import引入路径才行2.通过require更方便3.在ui上直接动态也要通过requirevue引入图片路径问题方法一方法二在data中引...
    99+
    2024-04-02
  • css如何引用图片
    小编给大家分享一下css如何引用图片,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   css引用图片第一步:在src目录下新...
    99+
    2024-04-02
  • css图片如何引用
    小编给大家分享一下css图片如何引用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css引用图片的方法:1、新建一个放图片的文件夹,通常为image;2、在同级目...
    99+
    2023-06-14
  • Vue3使用src动态引入本地图片的详细步骤
    目录1. vue-cli搭建的项目2.vite搭建的项目动态引入本地图片补充:vue3加载动态图片总结1. vue-cli搭建的项目 在项目中我们想要动态引入本地图片的时候,(注意这...
    99+
    2022-12-22
    vue动态加载图片src vue3引入本地图片 vue使用本地图片
  • 关于Vue中img动态拼接src图片地址的问题
    下面看下Vue中img动态拼接:src图片地址,具体内容如下所示: 使用场景:根据后端返回图片标记来匹配本地图片资源 例如:根据后端返回k1标记,前端生成assets/images/...
    99+
    2024-04-02
  • vue引用图片背景的方法
    Vue中引用背景图片的方法:1、通过img标签直接引用图片做背景;2、通过“background: url”的方式对元素添加样式引用背景图片;3、通过import方法,再引用背景图片即可。Vue中引用背景图片的示例:第一种方法通过img标签...
    99+
    2024-04-02
  • vue引用静态图片的方法
    vue引用静态图片的方法:1、使用img标签引用静态图片;2、使用require()引入需要添加的静态图片路径即可。具体操作示例:1、静态图片只有一张,不需要循环遍历显示,即 <img src="../....
    99+
    2024-04-02
  • vue中图片引入的示例分析
    这篇文章给大家分享的是有关vue中图片引入的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。图片引入无非是路径问题,路径就会有绝对路径,和相对路径这两个说法。有一种引入方式就是直接引入绝对路径<img...
    99+
    2023-06-02
  • vue中如何引用字体图标
    这篇文章给大家分享的是有关vue中如何引用字体图标的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。想在vue中引用阿里的iconfont,却出现报错 ,原因是没有对应的loader...
    99+
    2024-04-02
  • 如何通过C#引用传递
    这篇文章主要介绍“如何通过C#引用传递”,在日常操作中,相信很多人在如何通过C#引用传递问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何通过C#引用传递”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!C#...
    99+
    2023-06-17
  • Vue页面中引入img图片的方法
    我们在学习html的时候,图片标签<img>引入图片 <img src="../assets/images/avatar.png" width="100%"&...
    99+
    2024-04-02
  • 如何通过图片分析Visual Studio继承线
    这篇文章主要为大家展示了“如何通过图片分析Visual Studio继承线”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何通过图片分析Visual Studio继承线”这篇文章吧。Visual...
    99+
    2023-06-17
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作