当前位置: 首页 > 编程笔记 >

Vue.js中的图片引用路径的方式

轩辕佑运
2023-03-14
本文向大家介绍Vue.js中的图片引用路径的方式,包括了Vue.js中的图片引用路径的方式的使用技巧和注意事项,需要的朋友参考一下

当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形:

使用一

我们在data里面定义好图片路径

imgUrl:'../assets/logo.png'

然后,在template模板里面

/*错误写法*/
<img src="{{imgUrl}}">

这样是错误的写法,我们应该用v-bind绑定图片的srcs属性

<img :src="imgUrl">

或者

<img src="../assets/logo.png">

这种方式是按照正常HTML语法引用路径,放在模板里可以被webpack打包出来。

使用二

当我们需要在js代码里面写图片路径的时候,如果我们在data里面写

/*错误写法*/
imgUrl:'../assets/logo.png'

此时webpack只会把它当做字符串处理从而找不到图片地址,此时我们可以使用import引入图片路径:

<img :src="avatar" />
import avatar from '@/assets/logo.png'

在data里面定义

avatar: avatar

情形三

我们也可以把图片放在外层的static文件夹里面,然后在data里面定义:

imgUrl : '../../static/logo.png'
<img :src="imgUrl" />

总结

以上所述是小编给大家介绍的Vue.js中的图片引用路径的方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍关于vue.js发布后路径引用的问题解决,包括了关于vue.js发布后路径引用的问题解决的使用技巧和注意事项,需要的朋友参考一下 本文主要给大家介绍了关于vue.js发布后路径引用问题的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 在发布到iis目录下时候,如果放在网站的根目录下的时候,是不会有什么问题的 但是一旦放在了非根目录的其他文件夹里面,这时候in

  • 本文向大家介绍php 替换文章中的图片路径,下载图片到本地服务器的方法,包括了php 替换文章中的图片路径,下载图片到本地服务器的方法的使用技巧和注意事项,需要的朋友参考一下 php 替换文章中的图片路径,下载图片到本地服务器 以上这篇php 替换文章中的图片路径,下载图片到本地服务器的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍JS选项卡动态替换banner图片路径的方法,包括了JS选项卡动态替换banner图片路径的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS选项卡动态替换banner图片路径的方法。分享给大家供大家参考。具体分析如下: 这里演示一个选项卡演示如何动态替换图片的方法,用一个JS函数实现的定义鼠标滑过替换图片的路径。 参数说明如下: obj 当前触发事件的对象 hc 当前

  • 本文向大家介绍关于vue单文件中引用路径的处理方法,包括了关于vue单文件中引用路径的处理方法的使用技巧和注意事项,需要的朋友参考一下 前言 Vue 的单文件组件在使用 Vue 时非常常用,而在vue单文件的开发过程中,在单文件模版中可能会涉及到文件路径的处理,比如 <img>, style 中的 background 的处理等。下文中讨论了几种不同场景下的 <img> 的 src 处理,解释了在

  • 为什么vite打包后scss中引用的图片路径不对 vite配置如下: scss文件和图片文件目录结构如下: 打包后的目录结构: 打包后的css文件中的图片引用: 打包后正确的引用路径应该是这样:url(../img/add-1bd6048f.svg) 大佬问解惑下,为什么打包后的图片引用不对。 如果可以,不改变现有的文件目录和打包后的目录结构 现有的项目文件目录要合规范,所以这样放置。 打包后的目

  • 本文向大家介绍Vue.js实现图片的随意拖动方法,包括了Vue.js实现图片的随意拖动方法的使用技巧和注意事项,需要的朋友参考一下 主要代码如下: 以上这篇Vue.js实现图片的随意拖动方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。