vue 组件中图片地址，图片获取

た入场券 2022-05-25 01:07 514阅读 0赞

前提：在组件中使用引用图片，用于<img src>  或者  背景图片background;

当我们利用vue-cli 搭建好项目的框架，开始高高兴兴开发组件的时候，有的时候想加一张图片，或者

在样式中加个背景，会发现，图片引用不进来，这可愁坏了不是；

组件中引用图片用于 <img src="???">

使用图片之前，我们可以这么做，在组件的script 中引入图片，下面示例引入一张图片：

< script>

import skate2 from "../assets/img/skate2.png"

export default \{

name: "SkateTop"

\}

</ script>

导入我们的图片之后就可以在<img src="??">的地址中加上我们的地址就行了；

组件中样式中引入背景图片：

这个你可能会问，上面不是说了怎么引入图片了么，我用上面的方式也能加上背景图片啊，有什么问题么？

问题可大了， 你现在是在本地开发，貌似没问题，当你开发完丢到服务器一看，背景图片咋没了，好奇怪啊，

好吧，问题在于：我们要修改一个东西：

![70][]

看到没，找到这个utils.js 文件，图片都截给你了，找不到那就没办法了；

打开这个文件；

// Extract CSS when that option is specified

// (which is the case during production build)

if (options.extract) \{

return ExtractTextPlugin. extract(\{

use: loaders,

publicPath: '../../', //加上这么一句就可以了

fallback: 'vue-style-loader'

\})

\} else \{

return \[ 'vue-style-loader'\]. concat(loaders)

\}

\}

看到了吧，加上这么一句话就OK了，这里说的是基于vue-cli搭建的目录，注意咯！

好了，关键点已经详述，自己尝试吧！

[70]: /images/20220525/8d0733b3535f495facfc36c0a21a6020.png

发表评论取消回复

表情：

评论列表（有 0 条评论，514人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 中使用 Upload 组件上传图片

vue 中使用 Element 的 upload 组件上传 Excel，大致可以分两种情况 1. 使用 `action` 上传到服务器如下不讨论使用 a

朱雀/ 2023年01月16日 11:19/ 0 赞/ 166 阅读

相关 android获取图片获取地址_Kubernetes Pod 如何获取 IP 地址

【编者的话】在学习 Kubernetes 网络模型的过程中，了解各种网络组件的作用以及如何交互非常重要。本文就介绍了各种网络组件在 Kubernetes 集群中是如何交互的，以

清疚/ 2023年01月01日 09:53/ 0 赞/ 142 阅读

相关 vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用

vue项目ElementUI组件中el-upload组件与裁剪功能组件结合使用如下图所示，点击上传组件，选择文件后，会立马弹出图片裁剪功能组件的页面 ![在这里插入图

本是古典何须时尚/ 2022年12月28日 09:16/ 0 赞/ 213 阅读

相关多图片上传删除-vue-element ui 组件

O - 功能说明图片的上传删除回显修改功能，上传到oss。 Ⅰ- 壹 - 效果展示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZ

矫情吗；*/ 2022年10月29日 08:00/ 0 赞/ 153 阅读

相关 vue 项目下载图片地址和图片名称

vue 项目下载图片地址和图片名称引入：`import { downloadImage } from '@/utils/downloadImg'` 使用：`do

电玩女神/ 2022年09月11日 11:15/ 0 赞/ 207 阅读

相关根据图片地址下载图片

public static void saveFp(String url, String savePath,String filename){ Http

Myth丶恋晨/ 2022年06月02日 10:15/ 0 赞/ 205 阅读

相关 vue 组件中图片地址，图片获取

前提：在组件中使用引用图片，用于<img src> 或者背景图片background; 当我们利用vue-cli 搭建好项目的框架，开始高高兴兴开发组件的时候，有的时候

た入场券/ 2022年05月25日 01:07/ 0 赞/ 515 阅读

相关 PHP推流地址获取图片

PHP实现通过推流地址截取视频图片。解决思路：通过推流地址获取ts文件，将ts文件保存为mp4，再通过ffmpeg获取视频图片。 <?php // 推流地

ゝ一纸荒年。/ 2022年05月15日 15:29/ 0 赞/ 216 阅读

相关获取数组中对象数组的图片

//数据 data：[ { image:[ "artic

快来打我*/ 2022年02月19日 09:15/ 0 赞/ 212 阅读

相关 vue中使用el-carousel组件实现图片轮播效果

图片地址： ![20200709152232179.png][] 代码实现：  <template> <div>

Bertha 。/ 2021年07月25日 15:52/ 0 赞/ 2204 阅读