vue中在data中写入img地址引入问题

最新推荐文章于 2023-12-29 10:16:37 发布

上头upup

最新推荐文章于 2023-12-29 10:16:37 发布

阅读量2.1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_45802159/article/details/104292163

版权

本文介绍了在Vue项目中如何引用图片资源的三种常见情况：1) 在data中设置图片地址并用模板语法引入；2) 存储在public目录下直接在模板中引用；3) 在static目录下通过require引入静态资源。

摘要由CSDN通过智能技术生成

在这里插入图片描述

第一种情况

如果将img放在 src在下的assets中时候；img地址在data中

{
   
        id: 1153135,
        title: '精选1',
        price: 168,
        count: 40,
        imgAddress: require

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

上头upup

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue读取后台图片数组地址并显示

manonggui的博客

07-21

4307

vue读取后台图片地址显示不了读取后台图片方式分析结论解决前端代码后端java代码读取后台图片方式正常vue读取图片的方式是读取一个后台传过来这样子http://localhost:8081/img/20170419_110313f.jpg的后台地址，我们就可以读取到图片。可是有的人可能比如我习惯了 <img src="../../assets/img2/20170301-000.jpg"> 所以我也想做个循环后台传个"…/…/assets/img2/20170301-000.jpg

img pdf 展示_vue 中展示PDF内容

weixin_39628247的博客

12-20

829

vue 中展示PDF内容不久前有个需要改的需求，以前是直接根据链接让用户下载对应pdf文件来查看，最主要是给用户查看，然而这种并不是很安全的，其他用户可以进行下载或者使用pdf链接分享给其他人，所以后来需要验证后再进行展示pdf内容，只有对应知道的人自己验证后才能打开;这里说下自己的实现吧，读取pdf，那么在纯静态的使用vue-cli搭建的网站中读取pdf文件是不行的，何况涉及到验证，那么只有调用...

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

vue | 解决img绑定data中储存img地址及三目运算符切换不同地址无法显示的问题

最新发布

weixin_51464636的博客

12-29

557

浅记一下，怕忘。

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

weixin_45113258的博客

05-27

1135

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

【vue-data】引入图片2种方式

jieweiwujie的博客

11-06

661

<template> <div> <img :src="urlDate" /> <img :src="urlDate1" /> </div> </template> <script> import urlDate1 from "../assets/logo.png"; export default { data() { return { urlDate: require(".

Vue-在data中引入静态图片路径

每一次跌倒都是为了华丽的站起来。

09-01

7271

Vue-在data中引入静态图片路径

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

10-17

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

vue动态设置img的src路径实例

10-18

在Vue中，直接在模板中写入如`<img src="myImage.png" />`这样的代码，Vue会将其视为普通字符串，而非路径。要让Vue正确处理图片路径，必须将其作为响应式数据来管理。这通常意味着我们需要在Vue实例的data对象中...

vue 内联样式style中的background用法说明

11-19

在Vue中，如果图片地址是动态的，需要将`url()`函数与数据结合使用，例如： ```javascript (\'' + item.imageUrl + '\')' }"> ``` **背景颜色的设置** 设置背景颜色时，如果值是一个简单的颜色名称或十六进制值，...

vue在模拟数据data中存图片src地址的方法

林啾啾的博客

12-14

2793

1.图片存在本地时： <img :src="imgSrc" alt> data中存的图片地址用require包裹图片本地存储地址 data(){ return { imgSrc: require('../assets/images/banner.png'), } },

img src 使用 base64 图片数据

weixin_33972649的博客

03-11

1296

img src 使用 base64 图片数据在网页上显示一张图片通常是 <img src="xxx.png" > 或 <img src="www.url.com/te.png"> 但是如果我们有图片base64数据；也可以使用 base64数据来在网页上显示一张图片；格式： <img src="data:image/bmp;base64,Qk32egAAA...

Vue在data中存入静态图片地址，使用别名引入的方法

老黑

11-24

5042

在项目开发中，icons的引入遇见了麻烦在data中存入一组图片地址，并且循环渲染到组件上 <div class="icons-item" v-for="icon of list" :key="icon.type" @click="Jump(icon.type)"> <img class="icons-img" :src="icon.imgUr

vue中 data引入图片的几种方式

weixin_67271921的博客

01-05

2896

这里我需要循环图片的数组展示，所以是这种形式。

vue 中img标签的src地址放在data中不生效

weixin_43773218的博客

01-05

864

此时img标签便可以通过遍历的方式，再data中的imgList中找到图片路径。把img标签的src地址放在data中，再赋值给src的话是不生效的。一、将图片资源文件放在项目目录的static文件下，这样即可生效。二、通过import的方法将图片源路径引入。

巧妙将图片img src与data-src的值互换（mvc）

weixin_45932157的博客

02-12

4198

错误原因:由于在src的某些值是有图片的，而有些值是没有图片的，但data-src始终是有图片的，所以我们需要将data-src的值赋予给src即可解决这个问题。错误情况：下面没有图片，检查：查看src的图片：一样都没有。再看data-src的图片：是有图片的。解决： <script src="~/Scripts/jquery-3.4.1.js"></scr...

vue 在data中引入图片和背景图片

逆风优雅的博客

01-11

2917

在data中引入图片的时候，要加上 require 一、在data中引入图片： data() { return { active:0, firstLUl: [ { title: "全站监控运维管理", img: require("../../assets/logo.png"), content1: "6666666666666666666666", conte...

vue 中动态绑定 img 的 src 属性

Mark

10-28

7901

vue 中给 img 标签动态绑定 src 属性需要用到 require() 函数，比如： <div v-for="(item, index) in listData" :key="index" class="item"> <div class="icon"> <img :src="item.src" alt=""> ...

vue里面动态渲染data里面图片的方法

Haines

04-04

9761

<template> <div class="container">  <div class="cover" v-for="(item,index) in photoData"> <img :src="item" alt="" @

vue的三种图片引入方式

vue中在data中写入img地址 引入问题

第一种情况

vue中在data中写入img地址引入问题