解决vue v-for src 图片路径问题 404

2024-09-30 20:35:20

我的代码结构如下所示不能执行，会出现报错

<RadioGroup v-model="animal">
  <Radio v-for='a in radio_arr' label={{a}}></Radio>
</RadioGroup>

export default {
  data(){
  return{
    radio_arr:['循环1','循环2','循环3'],
        animal:'循环2'
  }
  }
}

报错信息：

修改代码如下：修改内容为 label={{a}} 修改为：label='a'

<RadioGroup v-model="animal">
  <Radio v-for='a in radio_arr' :label='a'></Radio>
</RadioGroup>

export default {
  data(){
    return{
      radio_arr:['循环1','循环2','循环3'],
      animal:'循环2',
    }
  }
}

效果如下：

图片添加src时：

第一种：

<img v-for='url in imgurl' :src='url' />

export default {
  data(){
    return{
            imgurl:['../assets/img/icon1.png' ,
                     '../assets/img/icon2.png']
          }
    }
}

报错如下：

修改之后的代码：修改内容为：

imgurl:['../assets/img/icon1.png' , '../assets/img/icon2.png']

修改为

imgurl:[require('../assets/img/icon1.png') ,require('../assets/img/icon2.png')]

<img v-for='url in imgurl' :src='url' />

export default {
  data(){
    return{
      imgurl:[require('../assets/img/icon1.png')
                 ,require('../assets/img/icon2.png')]
    }
  }
}

结果为：

第二种:

当我们需要在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 v-for src 图片路径问题 404就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

vue的三种图片引入方式代码实例

这篇文章主要介绍了vue的三种图片引入方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下首先给图片地址绑定变量: <template> <img :src="imgUrl"> </template> 在script中设置变量: //方法1:直接将图片引入为模块 require imgUrl from "../assets/test.png" //方法2:把imgUrl放
vue实现axios图片上传功能

vue中实现图片上传,我这里使用的是FormData通过axios向后台发送请求,从而实现图片的上传. 在发起请求的axios中一般用qs进行序列化,但是序列化之后,FormData就传送失败,所以要区别传送的数据类型. 经过多次摸索总结了以下经验,以供参考. 首先创建一个文件夹services ,里面有两个文件 index.js 和 api.js. 我们的qs序列化和数据拦截写在index.js中 import axios from "axios"; import config fr
vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）

说在前面网上有很多种文件上传的方法,根据公司最近的业务需求,要求实现多种文件的上传,在实现过程中,查阅了很多资料,最后,终于把功能实现了,开心! <template> <div> <v-header :left-text="`上传${columnName}`"></v-header> <div class="upload"> <div v-if="columnName === '视频'&q
详解在vue-cli3.0中自定css、js和图片的打包路径

前言我们有时候因为一些特殊需求,可能需要将js/css/img等资源文件都打包到根路径下,但vue-cli3.0的路径配置中仅有 assetsDir配置项能够配置所有的静态文件所在的文件夹,并不能针对css/js/img等资源文件分别来做设置,那么请看我如何尝试的吧! 分析众所周知,vue-cli3.0使用了webpack进行打包处理,那么我们是否可以拿到目前打包默认的一些webpack配置,并在这些配置中找到一些蛛丝马迹,从而更改配置来实现对打包路径的更改呢? 好在vue-cli3.0提供
Vue中图片Src使用变量的方法

相信不少同学在开发中都有遇到图片路径需要使用变量引入的情况,如定制化背景,动态展示头像等.可能也犯过如下错误 # 错误描述页面直接调用图片资源的方案 <img src="../../static/images/web_bg.png" /> 改写成变量形式,于是如下编写 <template> <img :src="imgSrc" /> </template> <script> export default
vue图片加载失败时用默认图片替换的方法

前言本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧方法如下原理就是给img绑定error事件,替换原有的src地址. 首先在data中创建一个defaultImg(随便起的),里面的值是该默认图片的地址: 在html页面的img标签上绑定该属性这样默认图片就设置好了: 这样做的好处就是可以提高用户体验,而图片的alt属性,是在图片显示失败后出现的文字,像下图所示,但是这样的用户体验不高: 像后台管理
Vue formData实现图片上传

本文实例为大家分享了Vue formData实现图片上传的具体代码,供大家参考,具体内容如下 import Vue from 'vue' /** * 图片上传 * 已注入所有Vue实例, * template模板里调用 $uploadFile(id) * 组件方法里调用 this.$uploadFile(id) */ const uploadFile = (id) => { let promise = new Promise((resolve, reject) => { let file =
vue实现修改图片后实时更新

1.vue图片上传,使用element UI 上传组件自己写 <el-upload action="string" :http-request="uploadImg" :show-file-list="false"> <el-button v-perm="'b:img:upload'" size="small" type="primary">点击上传</el
vue 项目打包时样式及背景图片路径找不到的解决方式

问题描述:vue项目打包后,文件找得到,但是引用的字体及背景图片找不到: 解决方法: 主要是需要单独为 css 配置 publicPath . ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath . 对于用 vue-cli 生成的项目,dist 目录结构如下: dist ├── index.html └── static ├── css ├── img └── js 经
解决vue v-for src 图片路径问题 404

我的代码结构如下所示不能执行,会出现报错 <RadioGroup v-model="animal"> <Radio v-for='a in radio_arr' label={{a}}></Radio> </RadioGroup> export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' } } } 报错信息: 修改代码如下: 修改内容为 la
vue webpack打包后图片路径错误的完美解决方法

项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示. 解决办法如图: (1). 修改 assetsPublicPath: './' (2).打开webpack.prod.conf.js,在output:增加 publicPath:
vue中本地静态图片路径写法

这里写图片描述需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png" class="" width="100%"/> 2.利用数组保存再循环输出: <el-carousel-item v-for="item in carouselData" :key="item.id&
解决Vue打包后访问图片/图标不显示的问题

大家可否遇到过 npm run build 打包后,项目在线上运行时,资源文件 (图片.图标)不显示的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件打开此文件后你会头晕,因为都是打包压缩过的css代码,不过没关系 ,关键字搜索url 检查该url路径是否匹配正确对比后惊人发现!!! 因此在url路径前添加../../就OK了, 但是很麻烦,每次打包后都要进行二次加工吗? 并不是!!! 2.自动添加 ../../ 的方法打开build/utils.j
解决vue router使用 history 模式刷新后404问题

因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误. 想要history模式正常访问,还需要后台配置支持.要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面. 也就是在服务端修改404错误页面的配置路
详解Vue.js中引入图片路径的几种方式

vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理: 在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用.这类引用会被 webpack 处理. 诸如 <img src="..."> . background: url(...) 和 CSS @import 的资源例如, url(./imag
基于vue 动态加载图片src的解决方法

好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p
Vue如何配置根目录@(引用路径)

目录 Vue如何配置根目录@ Vue配置@作为src根路径 Vue如何配置根目录@ 首先:@是在路径访问时使用的,为了减少层级引用. @这是webpack设置的路径别名,默认指向src. 旧版本在build/webpack.base.conf这个文件里面定义. 新版本在根目录下创建在vue.config.js定义. const path = require('path') const resolve = dir => path.join(__dirname, dir) module.export
解决vue打包项目后刷新404的问题

vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vu
vue部署到域名二级目录刷新404的解决

目录 vue部署到域名二级目录刷新404 vue如何部署二级目录说一下这里会遇到得问题如何解决 vue部署到域名二级目录刷新404 一个域名有个根目录,但有两个项目,就需要二级目录比如说,我有一个域名为csdn.com的服务器,我想部署两个项目: 12306项目:http://csdn.com/12306 淘宝项目:http://csdn.com/taobao 如果是单页项目,而且单页项目的路由用的是history模式,不管是vue还是react都会“刷新当前页面404” 这是因为这种(h

解决vue v-for src 图片路径问题 404

相关推荐

随机推荐