如何使用vue.js (transformAssetUrls)显示本地保存的图像？

使用vue.js的transformAssetUrls选项可以方便地显示本地保存的图像。transformAssetUrls选项是在vue.config.js文件中配置的。

首先，确保你已经安装了vue-cli，并且已经创建了一个vue项目。

然后，在项目根目录下创建一个vue.config.js文件，并在该文件中添加以下内容：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => {
        options.fallback.options.name = 'img/[name].[hash:8].[ext]'
        return options
      })
  }
}

上述配置中，我们通过chainWebpack方法来修改webpack的配置。我们找到处理图片的规则，使用url-loader，并通过tap方法来修改其配置。在options中，我们将图片的输出路径设置为img/[name].[hash:8].[ext]，这样图片将会被输出到img文件夹下，并且文件名会包含hash值。

接下来，在你的vue组件中，可以直接使用相对路径引用本地保存的图像，例如：

<template>
  <div>
    <img :src="require('@/assets/image.png')" alt="Image">
  </div>
</template>

在上述代码中，我们使用require函数来引用本地保存的图像，并将其作为src属性的值。注意，需要使用@符号来表示项目根目录。

这样，当你运行项目时，vue.js会自动处理这些本地图像，并正确地显示出来。

推荐的腾讯云相关产品：腾讯云对象存储（COS）。

腾讯云对象存储（COS）是一种安全、稳定、高效、低成本的云端存储服务，适用于存储大量非结构化数据，如图片、音视频、文档等。它提供了简单易用的API接口，可以方便地与vue.js集成。

产品介绍链接地址：腾讯云对象存储（COS）