解决vuecli3中img src 的引入问题

在vuecli3中，使用img标签的src属性引入图片时，需要注意以下几点解决问题。

1. 首先，确保图片文件存在于指定的路径下。比如在src/assets目录下有一张名为image.png的图片。

2. 在组件中使用img标签引入图片时，可以使用相对路径或绝对路径的方式。对于相对路径，可以直接使用相对于当前组件文件的路径，比如src/assets/image.png；对于绝对路径，则需要使用webpack提供的alias别名，比如@/assets/image.png。需要注意，使用别名时需要在vue.config.js中进行配置。

3. 直接使用相对路径或别名路径可能会导致图片路径不正确，这是因为vuecli3中使用了webpack进行打包，图片文件会被打包到dist目录下的静态文件夹中。所以，在src属性中使用相对路径或别名路径时，实际上对应的是打包后的路径，而不是源文件中的路径。可以通过在图片文件被加载时使用require函数来解决这个问题，比如:src="require('@/assets/image.png')"

4. 如果图片路径是由变量或表达式决定的，可以使用计算属性来动态生成图片路径，比如:src="imgPath"，然后在computed属性中通过返回正确的路径来解决问题。

综上所述，解决vuecli3中img标签src属性的引入问题，需要注意路径的正确性和使用require函数或计算属性来动态生成路径。

相关问题

vue cli3检测项目未引入的本地图片，并删除

你可以使用 webpack 打包图片并通过 Vue CLI3 进行引入，以便在项目中使用。如果你想删除项目中未引用的本地图片，可以使用以下步骤：

1. 安装 webpack 依赖包：

npm install webpack webpack-cli --save-dev

2. 在 `vue.config.js` 中配置 webpack：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000,
                name: 'img/[name].[hash:7].[ext]'
              }
            }
          ]
        }
      ]
    }
  }
}

3. 使用 webpack 打包图片并引入到项目中：

<template>
  <div>
    <img src="./assets/logo.png" alt="logo">
  </div>
</template>

4. 使用 `npm run build` 命令构建项目，webpack 会将图片打包到 `dist` 目录中。

5. 如果你想删除项目中未引用的本地图片，可以使用 `find` 命令查找所有图片文件，再使用 `grep` 命令查找项目中使用的图片，最后使用 `rm` 命令删除未使用的图片：

find ./src/assets -type f \( -name "*.png" -o -name "*.jpg" -o -name "*.jpeg" -o -name "*.gif" \) | grep -v -f <(grep -r -o -h --include "*.vue" --include "*.js" --exclude-dir node_modules "assets/.*\.\(png\|jpg\|jpeg\|gif\)" . | cut -d '/' -f 3- | sort -u) | xargs rm

这个命令将会删除所有未被引用的本地图片。注意，删除操作是不可逆的，请确保备份你的项目数据。

vue3 中img怎么使用需要加requer

在 Vue3 中，如果要使用 `<img>` 标签显示图片，需要使用 `require` 函数来引入图片资源。示例代码如下：

<template>
  <div>
    <img :src="require('@/assets/images/logo.png')" alt="Logo">
  </div>
</template>

其中 `@` 符号是 Vue CLI 中默认提供的别名，表示项目根目录。`require` 函数的参数是图片资源的相对路径，需要以 `@` 开头，表示项目根目录下的 `src` 目录。

需要注意的是，`require` 函数只能用于在模板中引入图片，如果要在 JavaScript 代码中引入图片，需要使用 ES6 的 `import` 语句。