vue 用逗号隔开的图片路径如何拆分成多个

2024-09-08

vue标签内循环数据逗号分隔

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

vue中如何动态的绑定图片，vue中通过data返回图片路径

在项目中遇到需要动态的改变图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. 效果:

vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改默认配置: env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', 修改为: env

vue项目build打包后图片路径不对导致图片空白不显示问题解决方法

1.在上篇文章src配置及引入的基础上修改项目配置: 文章链接地址:https://www.cnblogs.com/hsl-shiliang/p/10333022.html. 2.具体配置过程如图: (1).修改config文件夹下的index.js文件下的build对象下如下(修改 assetsPublicPath:'/' 为 assetsPublicPath:'./'): (2).修改build文件夹下的utils.js文件如下(需添加 publicPath:'../../'): 示例:(1

python - django 将图片路径地址转换成 InMemoryUploadedFile 并存储数据库

# 问题场景:对接第三方时遇到一个图片存储问题,对方给的是他们服务器的图片路径地址,但是我这里存储图片用的是 ImageField 字段属性,也设置了存储路径,现在一旦将图片显示到前端就会将设置的存储路径前缀也带上.但是又不能改成 CharField 字段属性,所以为了不影响当前数据的情况下,需要将第三方的图片下载到自己的服务器内,并存储.(不知道有没有更好的方法,反正我找了半天没找到..) # 这个转换可以相当于你提交表单时传的图片对象,可以直接存入django的 ImageField

vue上线后，背景图片路径错误

build 下的utils.js中添加配置 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../',//配置背景图片打包后路径出错问题 fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) }

vue项目webpack打包后图片路径错误

首先项目是vue-cli搭建的,项目结构如下: 然后发现在css里写的图片引用地址在开发时正常显示,但在打包扔上服务器之后报错报的是404,路径前面多了/static/css,不知道为啥. 在自己慢慢摸索之后发现了解决方法,其实很简单,只需把config下的index.js的assetsPublicPath配置成你项目的根目录路径就行了,例如: 图片也能正常访问了. 网上还看到说把图片都放到static下的,我试了下也是要配置assetsPublicPath成根目录的不然还是报错. 转自:ht

vue中动态加载图片路径的方法

assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径,将有webpack解析为模块依赖 static:在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方,不会被webpack解析.他会直接被复制到最终的打包目录(默认是dist/static)下.必须使用绝对路径引用这些文件,这是通过confi

CSS中的图片路径问题

CSS中的背景图片写了相对路径,为什么不显示那? [解决方法] CSS中的背景图片路径应该写成相对于当前CSS文件的路径,而不是针对网站根目录的相对路径.

vue 关于图片路径的问题

在vue 中,当我们想加载assets中的图片,本人按照多年的开发经验会这样写,那是没问题的 <img src="../assets.1.jpg"/> 如果我要用v-bind去动态绑定呢,正常思路来说我会这样写,但是在webpack中他会被当成一个字符串来处理,并不会转换为图片的路径 <img src="src"/> export default { name: 'index', data () { return { imgsrc2: '

vue的 v-for 循环中图片加载路径问题

先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要存放到前台.当时我想,vue 中的img 的src 可以动态绑定到一个变量上, 很简单吗,就没有考虑太多,直接开始做了. 首先和后台商量一下数据结构,因为图片要和名称一一对应,所以后台要返回中英文的名称的映射,我把前台的图片名称直接设置给后台给的英文名称,从而读取图片,图片和中文名称就一一对应了.数

vue build打包后css里的图片路径404不正确的问题

vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../' //添加这句话 }) } else { return ['vue-style-loader'

vue开发完成后打包后图片路径不对

用vue做了一个小的移动端项目,从头到尾做下来,感觉自己好多东西都没弄清楚过.也学到了很多,已整理笔记在自己电脑上,但是比较零散,空了再来仔细整理整理. 于是,上周五模拟好数据(接口还未写),准备打包发布到服务器上面看看效果. 这时,真的问题就来了,很多图片没出来,仔细一看,这特么的路径完全不对呀! 虽然以前也做vue, 但是仔细想想,自己还从来没有用vue-cli打包过后来看,一直是在本地边开发边看的. 所以呢,什么都得自己实践,才能学得更多! 废话不多说,直接上自己的代码例子: 之前我也写过

vue图片、背景图片路径问题

vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo.png" alt=""> 2.app.vue <style>中引入图片 body {background: url('../static/img/back5.jpg');} 3.组件行间样式引入背景图片 <div style="backgro

Vue如何在data中正常引入图片路径

在Vue项目中通过data设置图片路径,然后在template中引入后页面无法显示图片,浏览器控制台报错: 刚开始以为是路径出问题了,于是绝对路径.相对路径各种办法试了一遍,发现还是报错,后来才发现这是因为在Vue里动态生成的路径无法被url-loader解析到,此时有两种解决方法: 方法一.直接将你的图片源文件放在项目目录的static文件夹里,然后和正常写图片路径那样写就可以了:

vue项目图片路径问题

一般情况下我们为了能在本地显示效果,写图片路径会直接这样写,但是在实际中图片一般都是动态上传的, 所以,在vue中一般是这样的: 但是这样你会发现,图片根本显示不出来,只是显示了个图片的图标. 后来发现通过require了路径之后可以正常显示. 但是这样感觉还是不太好,因为我不想声明怎么多变量.于是就成了这样: 先把图片通过import导入,前面的../../直接改成 @ 就可以了,然后就可以通过上面图片这样的设置来显示了. 如果是要动态的话可以在方法里面通过this点属性来修改它:

vue项目打包后资源相对引用路径的和背景图片路径问题

vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPublicPath 中的'/'成为'./' 2.在build => util.js 里找到ExtractTextPlugin.extract增加一行:publicPath: '../../',主要解决背景图片路径的问题.

Vue 动态设置图片路径

大多数情况vue项目中组件是需要相互引用的,父组件引用子组件,子组件引用父组件,已达到组件重用的目的本次记录的是父组件引用子组件,img标签定义在多个子组件中,不同或相同的父组件引用同一个子组件,从而设置不同的图片路径 1.子组件实现 <div class="customerIntroduce-left">  <img :src=image_path /> </div> export defa

如何在vue中使用动态使用本地图片路径

不知道各位小伙伴有没有在开发遇到一个问题,就是在线上的项目使用后台返回本地图片路径,然后加载不上的情况呢? 我的解决方法就是:先在项目的data下定义好这样一个数组用于存放需要加载的路径 [ {name:"张山" url:require(./img/zhangshan.png)} , {name:"李四" url:require(./img/zhangshan.png)} , {name:"老王" url:require(./img/zhangs

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

目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法页面通过v-bind的方式加载:

vue中background-image图片路径问题

按照以往在css文件中写background:url('图片路径'),完成后加载竟然显示出错,起初以为路径不对,检查了几遍,仍然没有问题.最后百度找答案,发现不少同行都遇到过这种问题,遂记录下自己所采用的解决方式: data () { return { img: require('你的图片路径') } } div的写法: <div :style="{backgroundImage: 'url(' + img + ')'}"> </div> 更简便的写法: <