Vue练习5:图片的引入

这篇具有很好参考价值的文章主要介绍了Vue练习5:图片的引入。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

后续会补充

1.require引入        

        src  ->  asstes

<template>
  <img :src="url">
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      url: require("./assets/logo.png"),
    }
  }
}
</script>

2.import引入

        src -> asstes

<template>
  <img :src="url">
</template>

<script>
import URL from "./assets/logo.png";
export default {
  name: 'App',
  data(){
    return{
      url: URL,
    }
  }
}
</script>

3.public引入

        public -> img文章来源地址https://www.toymoban.com/news/detail-828728.html

<template>
  <img :src="url">
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      url: "img/logo.png",
    }
  }
}
</script>

到了这里,关于Vue练习5:图片的引入的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue】vue.js中引入组件

    注意组件中的name命名方式 希望我的分享能够帮助到更多的人,如果觉得我的分享有帮助的话,请大家一键三连支持一下哦~ ❤️原创不易,期待你的关注与支持~ 点赞👍+收藏⭐️+评论✍️ 😊之后我会继续更新前端学习小知识,关注我不迷路~

    2024年02月12日
    浏览(42)
  • vue中引入图片的方法

    一、图片放在/public目录下 二、图片在/src/assets目录下 此时需要使用相对路径来引用 我们先看一下@是否配置为了src目录,查看vue.config.js 方法1:在vue中设置一个变量来引入 然后直接在img中使用 方法2:在css样式中引用

    2024年02月06日
    浏览(28)
  • uniapp引入全局js,vue2/vue3不同方式引入

    Hi I’m Shendi uniapp引入全局js,vue2/vue3不同方式引入 最近写小程序,个人开发,选用了 uni-app 进行开发 选用的 vue3 版本 因为我用的 vue3 版本,在这里踩了没学过vue3的坑,用vue2引入全局js的方式使用,导致undefined… Vue2 版引入全局js的方法如下 将js放到项目内,一般放到自建的

    2024年02月03日
    浏览(57)
  • Vue3 —— 在vue中动态引入组件以及动态引入js的方法

    文章目录 一 、 动态引入组件 1. 具体写法 二、 动态引入js文件 1. 具体写法 总结 定义一个异步组件,它在运行时是懒加载的。参数可以是一个异步加载函数,或是对加载行为进行更具体定制的一个选项对象。 在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时

    2024年02月12日
    浏览(50)
  • Vue.js快速入门 (cdn引入)

    提示:以下是本篇文章正文内容,前端系列学习将会持续更新 官网 :https://cn.vuejs.org Vue 是一个框架,也是一个 响应式数据驱动 。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的,不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。

    2024年02月12日
    浏览(47)
  • 前端vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决【引入新建页面或者通过router引入时报错】

    🌏 博客首页: 水香木鱼 📌 专栏收录:后台管理系统 📑 文章摘要: vue   typescript   vite 💌 木鱼寄语: 故木秀于林,风必摧之;堆出于岸,流必湍之;行高于人,众必非之。 提示找不到模块问题 👇 解决方案: 在 src 目录下, vite-env.d.ts 文件内新增如下代码: 在 tsco

    2024年02月13日
    浏览(64)
  • 前端vue引入高德地图入门教程

    距离上一篇关于前端项目中使用高德地图的文章已经将近5年之久, 这是我的第一篇关于高德地图的文章 这期间前端技术日新月异,5年前JQuery还如日中天,如今已经销声匿迹,很少有公司招聘还在要求JQuery,更多的是Vue、React。 如今更多采用模块化开发,结合webpack、vite,我

    2024年02月11日
    浏览(52)
  • 【Vue2】引入本地原生JS文件

    日常开发的时候,第一个想法肯定是找现有的插件进行开发,在项目中npm install xxx 插件即可。但是也有无法使用的插件的情况,就需要我们引用我们本地的原生js。 自己写的文件或者别人的插件都可以通过下面的方式修改成vue能够识别的js。 字符操作文件 utils/str.js  在函数

    2024年02月16日
    浏览(45)
  • Vue 组件中如何引入外部的js文件

    在Vue中,通常我们引入一个js插件都是使用 npm  方式下载然后 import 使用的。但是我现在本地有了js文件或者是一个远程js文件链接,我不想使用 npm install xxx  的方式,有什么办法吗? 简单粗暴,直接在Vue项目的 index.html  中使用全局的方式引入,比如: 缺点: 不使用该js插

    2024年02月08日
    浏览(66)
  • 清除引入js缓存,vue切换页面重新加载

    require引入的js require.cache删除js缓存

    2024年02月16日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包