Vue文件中引入img 路径写法

最新推荐文章于 2024-05-14 16:54:15 发布

ahu2331

最新推荐文章于 2024-05-14 16:54:15 发布

阅读量1.5k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zousaili/p/9361409.html

版权

把图片路径写在data里面，然后渲染模板的两种方式

方案1、在data使用require将图片进入，写法如下

logo: require('../asset/admin/logo.png')

在模板中渲染

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

在data中使用

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

转载于:https://www.cnblogs.com/zousaili/p/9361409.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ahu2331

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue 引用src中的文件_Vue项目中img标签src的路径问题

weixin_39668571的博客

12-22

1297

一、问题引入今天重构之前赶工的项目，父组件通过属性绑定传值给子组件，子组件的图片url在img标签的src属性中相对路径写死的。(路径初始就写在src属性中)像这种直接写死的没有出现什么问题。但肯定是要改为父组件传值url过来属性绑定来设置的(毕竟是个组件，写死这组件的复用性就太差了)。此时看了一下运行项目后此图片的路径。webpack编译后的图片文件夹 img 会直接在根目录，图片的上层目录 s...

Vue.js中引入图片路径的几种方式

weixin_39854011的博客

02-24

2750

vue中静态资源的引入机制 Vue.js关于静态资源的请查看：官方文档静态资源可以通过两种方式进行处理： 1、在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用。这类引用会被 webpack 处理。诸如 <img src="..."、background: url(...) 和 CSS @import 的资源写在 template 中内联 style 的 background: url(...) 样式，在当前版本的测试中，即使使用了相对路径

参与评论您还未登录，请先登录后发表或查看评论

vue中的img路径

03-30

1万+

目录一、引入public中的img 二、引入assets中的img 三、通过require()函数动态引入路径四、css中background属性通过url()函数引入路径五、css中background属性通过url()函数动态引入路径六、通过组件动态引入路径七、组件引入public中的路径八、组件引入外部图片链接推荐<el-image>组件，其详细介绍见：https://element.eleme.cn/#/zh-CN/component/image 一

✅Vue选择图像

DiyAbc

08-16

1032

下载 ✅Vue选择图像 ✅Vue选择图像 Vue 2。用于从列表中选择图像的组件演示 https://mazipan.github.io/vue-select-image/ 安装 #纱纱添加vue-select-image NPM npm i vue-select-image -save 如何使用进口从“vue-select-image”导入VueSelectImage / /添加样式表要求(“vue-select-image / dist / vue-select-image.css”) 注册组

如何在vue项目中使用图片路径

小方块的世界

04-20

3053

问题描述在img标签中如何引入图片路径如何动态修改图片地址在background属性中如何引入图片地址问题解决图片目录 - src -- assets --- images 在img标签中直接使用图片 <img src="@/assets/image/banner.png"> 动态改变img标签的地址，比如轮播图： <img :src="imgList[activeIndex]"> getImgList() { let arr = []

vue中图片引入与使用几种方式

木昆灵寒酥的博客

05-14

1137

将编写代码时定义的路径转换为编译打包后的路径。

vue动态引入图片

m0_68324632的博客

08-29

9371

这篇文章主要介绍了关于vue图片路径的处理问题，在我们想要动态加载图片路径时，由于vue的打包原理不同，我们也有不同的处理图片路径方法，希望对大家有所帮助。如有错误或未考虑完全的地方，望各位斧正。...

vue中img src 动态加载本地json的图片路径写法

10-17

本文将深入探讨如何在Vue中使用`img`标签的`src`属性动态加载本地JSON文件中存储的图片路径。首先，重要的一点是，无论是本地JSON文件还是其中的图片URL，它们都应该放在`static`文件夹内。这是因为Vue CLI或...

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

10-19

以下是根据提供的文件内容总结的Vue.js中图片引用路径的几种方法以及相关知识点。 ### 1. 使用模板字符串插值在Vue模板中，我们可以使用双大括号 `{{ }}` 进行数据绑定，对于图片的src属性，我们可以这样写： ``...

vue2项目中vue文件中引入/assets/images/user_data/下的图片，有几种代码写法

最新发布

09-11

在Vue 2项目中，引入`/assets/images/user_data/`下的图片通常有以下几种常见的写法： 1. 使用绝对路径： ```html <img :src="/assets/images/user_data/male.png" alt=""> ``` 这种方式直接使用完整的URL路径...

vue之img标签:src地址拼接 --随记

leo

12-13

3万+

背景：图片为本地资源，根据后台返回的icon（图片名字/标记）匹配本地图片。代码：（假数据） <template> <div> <ul class="gift_main_list" v-if="tabIndex == 1"> <li class="list_item" v-for="(it

Vue img 动态写入图片

一碗老面的博客

10-29

866

<imgclass="imgStyle":src="img"> this.img=require(`@/assets/img/${item.sceneName}.png`)

Vue3动态引入图片

明月清風

04-04

1万+

技术方案 Vue3+Composition API 场景在子组件中需要将父组件传入的图片路径赋给img标签，对图片进行显示。为便于子组件复用，图片路径需动态传入，不可在子组件中写死。问题若在setup函数中直接return imgSrcUrl，并在template img标签中引入的话，会导致无法显示图片即找不到文件所在路径，与webpack打包静态资源的方式有关系。 <template> <div> <img :src="userImgSrc">

vue3+vite 动态引入图片的几种方式

qq_43372535的博客

10-18

2555

vue3+vite 动态引入图片的几种方式

vue引入图片的几种方式

qq_36571836的博客

07-16

3万+

Vue引入图片的几种方式情况1：图片在/public目录下把图片放到与index.html同级的目录下方式1 因为vue编译后会生成index.html，所以我们将图片与index.html放在同一目录下，相当于在index.html中使用引入图片  <img src="login-bg.png"> <!-- img标签引入图片：'/' + 图片名称，这种属于绝

Vue中img的src属性绑定

林飞的梦呓

04-21

4万+

在vue的开发中遇到这样一个问题： img的src属性绑定url变量，然而图片加载失败。大部分的情况中，是开发者使用了错误的写法，例如：<img src="{{ imgUrl }}"/>这样写肯定是不对的，正确的写法应该使用v-bind:<img v-bind:src="imgUrl"/>

vue中本地静态图片的路径应该如何写

热门推荐

开心大表哥

03-06

6万+

需求：如何components里面的index.vue怎样能把assets里面的图片拿出来。 1.在img标签里面直接写上路径： <img src="../assets/a1.png" class="" width="100%"/> 2.利用数组保存再循环输出： <el-carousel-item v-for="item in carouselData" :k...

vuecli3中img src 的引入问题

qq_43653325的博客

01-24

1万+

最近公司要做一个在线ps 的项目但是后台没写完, 我在用本地图片上传预览的时候发现图片不能显示, 解决的办法是 //页面的结构 <div class="workspace" > <img :src='img'> </div> export default { data() { return { img:...

Vue项目中使用img图片和background背景图的使用方法

总结前端开发中遇到的问题，分享前端知识

09-11

1万+

Vue项目中使用img图片和background背景图的使用

vue router怎么加载中文路径的vue文件

07-14

在Vue Router中加载中文路径的Vue文件与加载其他路径的文件并没有太大的区别。你可以按照以下步骤进行操作： 1. 首先，在你的Vue项目中创建一个新的路由文件，比如`router.js`。 2. 在`router.js`中，引入Vue和Vue Router，并创建一个新的路由实例。 ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = new VueRouter({ routes: [ // 在这里定义你的路由配置 ] }); export default router; ``` 3. 在路由配置中，定义你的中文路径对应的路由规则。例如，如果你的中文路径是`/中文路径`，你可以将其映射到一个相应的Vue组件。 ```javascript const routes = [ { path: '/中文路径', component: () => import('@/views/YourComponent.vue') // 这里是你的中文路径对应的组件路径 }, // 其他路由配置... ]; ``` 4. 最后，在主应用程序中导入和使用你的路由配置。 ```javascript import Vue from 'vue'; import App from '@/App.vue'; import router from '@/router'; // 引入你的路由文件 new Vue({ router, // 将路由实例注入到Vue实例中 render: h => h(App) }).$mount('#app'); ``` 这样，当你访问`/中文路径`时，Vue Router会加载对应的中文路径下的Vue组件。记得在你的项目中配置好相应的组件路径。希望对你有所帮助！