src在静态绑定图片地址时不会出错,而动态绑定图片地址报错404.

我的写法如下:

<img :scr="imgUrl">
...
data(){
	return {
		imgUrl: '@/assets/images/office1.jpg'  //报错 404
	}
}

在这里插入图片描述
原因:

  • 静态资源会直接被webpack copy到对应的静态资源文件夹下。而动态资源会被webpack当成模块打包,路径错乱,所以报错404。
  • assets目录中的文件会被webpack处理解析成模块依赖,只支持相对路径形式

解决办法
1. 将图片作为模块加载进去

<img :scr="imgUrl">
...
data(){
	return {
		imgUrl: require('@/assets/images/office1.jpg') //成功 不报错
	}
}

2. 将图片放在public文件夹里

  • public目录不会被webpack处理,它们会直接被复制到最终的打包目录(默认是(dist/static)下。请注意vue.config.js中的publicPath。
<img :scr=`${{publiPath}}${{imgUrl}}`>
...
data(){
	return {
	//默认情况下publicPath是‘/’ 这里可以省略不写,如不是,则加上下面这句
    	publicPath: process.env.BASE_URL,
		imgUrl: '/image/office1.jpg' //成功 不报错
		//注意 image是public下的一个子文件
		//这里千万不要写成 'public/image/office1.jpg' 会报错!
	}
}

Logo

前往低代码交流专区

更多推荐