Vue.js中第一个img正常显示，插值绑定的第二个不显示问题求助

嘿，这个问题我之前也碰到过！核心差异在于Vue/Webpack对静态资源的编译处理逻辑：

• 第一个静态写法 <img src="@/assets/img/profileicon/3867.png"/>：在编译阶段，webpack会通过vue-loader和资源处理loader（比如url-loader/file-loader）识别@别名（它对应你的src目录），自动把图片路径替换成打包后的最终URL（也就是你看到的/img/3867.png），所以浏览器能正确加载。

• 第二个动态拼接写法:src="'@/assets/img/profileicon/' + this.summonerInfo.profileIconId + '.png'"：这里的路径是运行时才拼接出来的字符串，webpack在编译阶段无法识别这个动态生成的@路径，不会对其做别名解析和资源打包处理。最终浏览器拿到的是原始的@/assets/img/3867.png，但浏览器本身不认识@这个别名，自然找不到图片。

下面是几种可行的解决办法，你可以根据项目需求选择：

方法1：使用require()动态引入（推荐） #

利用webpack的require()语法，让它在编译阶段解析动态路径。修改代码为：

<img :src="require('@/assets/img/profileicon/' + this.summonerInfo.profileIconId + '.png')" />

原理 #

require()是webpack的模块加载语法，当你传入动态拼接的路径时，webpack会在编译阶段扫描@/assets/img/profileicon/下的所有.png文件，把它们纳入打包范围，并在运行时返回正确的资源URL。

小提示：如果存在某个profileIconId对应的图片不存在的情况，记得添加默认图处理，否则可能会触发编译或运行时错误。

方法2：将图片移至public目录 #

如果你的项目是Vue CLI创建的，默认会有public目录。把profileicon文件夹移到public/img/下，然后修改代码为：

<img :src="`/img/profileicon/${this.summonerInfo.profileIconId}.png`" />

原理 #

public目录下的资源不会被webpack处理，会直接复制到打包后的根目录。浏览器可以通过绝对路径直接访问这些资源，不需要依赖webpack的别名解析。

方法3：预导入所有图标并映射为对象 #

提前在一个单独的文件（比如src/assets/img/profileicon/icons.js）中导入所有需要的图标：

// icons.js
import icon3867 from './3867.png'
// 导入其他需要的图标...

export default {
  3867: icon3867,
  // 其他图标ID与路径的映射...
}

然后在组件中引用这个对象：

<script>
import icons from '@/assets/img/profileicon/icons.js'

export default {
  data() {
    return {
      icons,
      // ...其他数据
    }
  }
}
</script>

<template>
  <img :src="icons[this.summonerInfo.profileIconId]" />
</template>

原理 #

这种方式通过静态导入让webpack提前处理所有图标路径，生成正确的URL，然后通过对象映射在运行时直接获取对应路径，适合图标数量固定且不多的场景。

内容的提问来源于stack exchange，提问作者Onyx