vue引入图片的方式-摩杜云开发者社区

一、img标签

1、静态引入（静态路径加载）

相对路径

<img class="pic-404__child left" src="../../assets/404_images/404_cloud.png" alt="404">

绝对路径

<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">

2、动态引入（require 驱动加载）

data() {
  return {
    imgUrl: require("@/assets/404_images/404_cloud.png")
  }
}

// 第一种
<div
  :style="{
    background:'url(' + imgUr + ') no-repeat center/100% 100%',
   }"
 ></div>

// 第二种
:style="{
  background: `url(${imgUr }) no-repeat center/100% 100%`,
}"

// 第三种
<img class="pic-404__child left" src="imgUr" alt="404">

// 使用函数表达式
< img class="pic-404__child :alt="404" :src="retImg(imgUrl)">

retImg(imgUrl) {
  if(a) {
    return require("@/assets/404_images/404_cloud.png")
  } else {
    require("../../assets/404_images/404_cloud.png")
  }
}

二、标签的背景图片设置。（background）

1、在class中使用 ~ 符号

// css样式
.item {
  background: url(~@/assets/img/04_2.jpg);
  background: url('~@/assets/img/04_2.jpg');
}

2、在style中设置

imgUr: require("@/assets/404_images/404_cloud.png")

<div
  :style="{
    background:'url(' + imgUr + ') no-repeat center/100% 100%',
   }"
 ></div>

// 第二种
:style="{
  background: `url(${imgUr }) no-repeat center/100% 100%`,
}"

三、import导入

<img class="pic-404__child left" src="imgUr" alt="404">

import imgUrl from "@/assets/404_images/404_cloud.png"

data() {
   return {
      imgUr,
   }
}

具体代码实现：

PS:url-loader只能处理css中的url引入的文件，要处理html中的img标签，还需要引入一个html-loader。

module.exports = {
    mode: 'production',
    module: {
        rules: [
            // 图片处理
            // 小于5K的图片将直接以base64的形式内联在代码中，可以减少一次http请求。
            // 大于5k的则直接file-loader打包, 而name也是file-loader的属性
            {
                test: /.(woff|woff2|eot|ttf|svg|jpg|png|gif)??.*$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 小于 5kb 的图片用 base64 格式产出
                        // 否则，依然延用 file-loader 的形式，产出 url 格式
                        limit: 5 * 1024,

                        // 打包到 img 目录下
                        outputPath: '/img1/',

                        // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                        // publicPath: 'http://cdn.abc.com'
                    }
                }
            },
          // html中的img图片资源处理
            {
                test: /.html$/,
                loader: 'html-loader',
                options: {
                    esModule: false,
                }
            },
            // 其他资源处理
            {
                exclude: /.(html|css|js|less|jpg|png|gif)$/,
                loader: 'file-loader',
                options: {
                    naem: '[hash:10].[ext]',
                    outputPath: 'media'
                }
            }
        ]
    }

}

配置生成文件的存放位置：

output: {
    // 路径
    path: __dirname + '/dist/',
    // 访问路径
    publicPath:'/dist/'
    // 文件名
    filename: 'js/[name].js'
  },